Angular 2檢查電子郵件是否有效

Question

我正嘗試使用以下模板驅動窗體爲anguar 2構建一個簡單的驗證窗體。但是，我收到以下錯誤消息。

error_handler.js：54 EXCEPTION：錯誤./LoginComponent類LoginComponent - 聯模板：4：32所造成的：無法讀取的不確定

財產 '有效'，我相信錯誤是正在添加來自！email.vaid。但我不明白爲什麼。

<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 /> 

您是在模型對象.Does模型對象訪問電子郵件屬性存在於您的課嗎？ 試試這個代碼

@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的模板爲您提供了一個很好的語法來檢查是否定義了名爲safe-navigation-operator（？）的值。

*ngIf="!email?.valid" 

這類似於這樣：

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

更多信息： https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator