角2電子メールが有効かどうかを確認してください

Question

私はanguar 2の次のテンプレート駆動型を使用して簡単な検証フォームを作成しようとしています。

error_handler.js：54 EXCEPTION：./LoginComponentクラスLoginComponentでのエラー - インラインテンプレート：4：によって引き起こさ32：未定義

のプロパティを読み取ることができません '有効' 私はエラーが来ていると信じてから！email.vaid。しかし、なぜ私は理解していない。あなたはモデルオブジェクト.Doesモデルオブジェクトの電子メールプロパティにアクセスしている

<div class="col-md-6 col-md-offset-3"> 
    <h2>Login</h2> 
    <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate> 

     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !email.valid }"> 
      <label for="email">Email</label> 
      <input type="email" class="form-control" name="email" [(ngModel)]="model.email" #email="ngModel" required /> 
      <div *ngIf="f.submitted && !email.valid" class="help-block">Email is required</div> 
     </div> 

     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }"> 
      <label for="password">Password</label> 
      <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required /> 
      <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div> 
     </div> 
    </form> 
</div> 

Answer 1

<input type="email" class="form-control" name="email"  [(ngModel)]="model.email" #email="ngModel" required /> 

は、あなたのクラスに存在しますか？カランガーグは、電子メールが定義されていないように見え、示唆したように このコード

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div class="col-md-6 col-md-offset-3"> 
    <h2>Login</h2> 
    <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate> 

     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !email.valid }"> 
      <label for="email">Email</label> 
      <input type="email" class="form-control" name="email" [(ngModel)]="user.email" #email="ngModel" required /> 
      <div *ngIf="!email.valid" class="help-block">Email is required</div> 
     </div> 

    </form> 
    </div> 
     `, 
    }) 
    export class App { 
    name:string; 
    user:any = { 
     email:'test' 
    } 

Answer 2

を試してみてください。 Angular 2のテンプレートは、値が定義されているかどうかを確認するための構文を、セーフ・ナビゲーション・オペレータ（？）といいます。

*ngIf="!email?.valid" 

これはやって次のようになります

*ngIf="email && !email.valid" 

さらに詳しい情報： https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator