Angular2：验证md-input中的电子邮件地址

Question

我有这个带有md-input元素的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-hint不包含格式正确的电子邮件地址，我也会md-input出现。我该怎么办？

Answer 1

您可以通过指令使用电子邮件验证程序。见EmailValidator class。

  

通过NG_VALIDATORS绑定将电子邮件验证程序添加到标有电子邮件属性的控件的指令。

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

该指令也可以在ng2-validators包中找到。