Angular2：MD-入力

Question

内の電子メールアドレスを検証し、私は内部のMD-入力要素と、このAngular2フォームを持っている：

<form noValidate (ngSubmit)="onSubmit(resetPasswFg)" [formGroup]="resetPasswFg" style="width:400px;border:1px solid black; "> 
    <table style="width:400px;"> 
    <tr> 
     <td> 
     <md-input class="input" mdInput placeholder="Email" type="email" formControlName="email"> 
      <md-hint class="input_error" *ngIf="resetPasswFg.get('email').hasError('required') && resetPasswFg.get('email').touched"> 
      Email required 
      </md-hint> 
     </md-input> 
     </td> 
    </tr> 
<!-- Other elements --> 
</form> 

、これはコンポーネント内の私のバリデータです：

今

ngOnInit() { 
    this.resetPasswFg = new FormGroup({ 
     email: new FormControl('', [Validators.required, Validators.required ]) 
    }) 
} 

、電子メールの場合フィールドがポピュレータでない場合は、md-hintが正しく表示されます。今度は、md-inputに電子メールアドレスが含まれていない場合でも、md-hintが表示されます。どのようにできるのか？

Answer 1

電子メールバリデーター経由で使用できます。クラスEmailValidatorを参照してください。

NG_VALIDATORSバインディングを使用して、電子メール属性でマークされたコントロールに電子メールバリデータを追加する指示。

---

<md-input class="input" mdInput placeholder="Email" type="email" formControlName="email" email> 

ディレクティブは、パッケージng2-validatorsでもご覧になれます。