2016-11-12 8 views
5

私はangularjs 2とionic 2を初めて使っています。私は、Validators、FormControl、FormGroupを使ってangularjsフォームを使っています。 ionic serve --labを使用してプロジェクトを実行すると、すべてがうまくいきます。そのプロジェクトをビルドするとというエラーが表示されます:プロパティ 'username'が型に存在しません。typescriptエラータイプにプロパティがありません

login.ts

import { Component } from '@angular/core'; 

import { LoadingController, NavController } from 'ionic-angular'; 

import { AuthService } from '../../service/authService'; 

import {Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms'; 

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 
export class LoginPage { 

    user: any; 

    submitAttempt: boolean = false; 

    slideTwoForm : FormGroup; 

    constructor(public navCtrl: NavController, 
       public authService: AuthService, 
       public loadingCtrl: LoadingController, 
       private formBuilder: FormBuilder) { 

    this.slideTwoForm = formBuilder.group({ 
     username: ['', Validators.compose([Validators.minLength(5),   Validators.required])], 
     description: ['', Validators.required], 
     age: [''] 
    }); 
    } 

    logForm() { 
    if (!this.slideTwoForm.valid) { 
     this.submitAttempt = true; 
    } 
    } 

} 

login.htmlと

<ion-content padding> 
    <form [formGroup]="slideTwoForm" (ngSubmit)="logForm()" novalidate> 
     <ion-item> 
      <ion-label floating>Username</ion-label> 
      <ion-input #username formControlName="username" type="text"></ion-input> 
     </ion-item> 
     <ion-item *ngIf="!slideTwoForm.controls.username.valid && submitAttempt"> 
      <p>Please enter a valid name.</p> 
     </ion-item> 
     <ion-item> 
      <ion-label>Description</ion-label> 
      <ion-textarea formControlName="description"></ion-textarea> 
     </ion-item> 
     <ion-item> 
      <ion-label floating>Age</ion-label> 
      <ion-input formControlName="age" type="number"></ion-input> 
     </ion-item> 
     <ion-item *ngIf="!slideTwoForm.controls.age.valid && submitAttempt"> 
      <p>Please enter a valid age.</p> 
     </ion-item> 
     <button ion-button type="submit">Submit</button> 
    </form> 
</ion-content> 

私はAPKファイルを生成するイオンビルドアンドロイドコマンドを実行するまで、すべてが細かいです。
誰かが私にこれらのエラーを受け取っている理由を教えてもらえますか?

また、私は、このリンクを参照:Property does not exist on type. TypeScriptを、それは私を助けることはできません。

答えて

3
<ion-content padding> 
    <form [formGroup]="slideTwoForm" (ngSubmit)="logForm()" novalidate> 
     <ion-item> 
      <ion-label floating>Username</ion-label> 
      <ion-input #username formControlName="username" type="text"></ion-input> 
     </ion-item> 
     <ion-item *ngIf="!slideTwoForm.controls["username"].valid && submitAttempt"> 
      <p>Please enter a valid name.</p> 
     </ion-item> 
     <ion-item> 
      <ion-label>Description</ion-label> 
      <ion-textarea formControlName="description"></ion-textarea> 
     </ion-item> 
     <ion-item> 
      <ion-label floating>Age</ion-label> 
      <ion-input formControlName="age" type="number"></ion-input> 
     </ion-item> 
     <ion-item *ngIf="!slideTwoForm.controls["age"].valid && submitAttempt"> 
      <p>Please enter a valid age.</p> 
     </ion-item> 
     <button ion-button type="submit">Submit</button> 
    </form> 
</ion-content> 
+0

Thanx @dhyanandra –

2

Ionic2は、事前に使用していますアンドロイドを構築するときにコンパイルします。 IBMアカデミーは必要:

A)の特性は、HTMLで記載されているプロパティは、コンポーネントの中で宣言される)パブリック

Bであること。

したがって、問題を解決するには、 パブリックusername:string;を宣言してください。あなたのフォームにアクセスしている他の名前も宣言してください。

または... htmlでは、formControlName = 'user.username'と記述し、すでに宣言しているプロパティを使用できます。

+0

aswellコンポーネントであなたのelementrefを宣言することを忘れないでください、私はAOTコンパイラが – kolexinfos

+0

@kolexinfosあなたのコメントを見ますが、他の答えを見ていなかったいくつかのこれらのHTMLタイプのエラーを無視するように得ることができます。彼らは[]プロパティgetを使ってエラーを無視したので、静的なコンパイラチェックはありません。これで問題を無視する方法です。 – misha130

関連する問題