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