如何在 Angular 2 中验证 md-input 中的电子邮件地址

Question

我有这个 Angular 2 表单，里面有 md-input 元素：

<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 中使用。