用于电子邮件验证的Angular 2材质设计

嗨，我正在尝试使用Angular 2的材料设计实现表单验证。 以下是输入字段：

<md-input-container class="example-full-width" 
          dividerColor="{{username.untouched || username.valid?'primary':'warn'}}">
          <input mdInput placeholder="Email" type="email" name="username" id="username"
            #username="ngModel" required 
            [(ngModel)]="loginModel.username">
        </md-input-container>

它适用于必需的电子邮件，但不适用于不正确的电子邮件。

使用

，您不必担心错误验证样式

HTML:

---

希望这能有所帮助。

电子邮件验证程序仅在angular v4.0.0-beta.6版之后才添加，它需要

电子邮件

属性。另请参见示例@yurzui，它显示属性“email”在类型“typeof Validators”上不存在。有什么建议吗？正如你在我的扑克牌中看到的，是我创造的manually@yurzui如果您对Plunkr发表一些评论，那么理解这一点将非常有帮助，因为在Github的组件文件中，MD？@Davor中没有现有的电子邮件验证器：const email_REGEX=/^[a-zA-Z0-9.！$$%&'*+/=？^ `{124}-]+@[a-zA-Z0-9-]+（？：\.[a-zA-Z0-9-]+）*$/；emailFormControl=新的FormControl（“”，[Validators.required，Validators.pattern（EMAIL_REGEX）]；}

<md-hint *ngIf="username.errors &&(username.dirty || username.touched)">
              <span [hidden]="username.errors?.required || !username.errors?.email">Invalid email</span>
              <span [hidden]="!username.errors?.required">Required.</span>
            </md-hint>

<md-input-container>
    <input mdInput placeholder="email" [formControl]="emailFormControl" required>
    <md-error *ngIf="emailFormControl.hasError('required')">
    This field is required
    </md-error>
    <md-error *ngIf="emailFormControl.hasError('pattern')">
    Please enter a valid email address
    </md-error>
</md-input-container>

import { FormControl, Validators, NgModel } from '@angular/forms';

const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
export class FormlayoutComponent {
    private emailFormControl = new FormControl('', [Validators.required, Validators.pattern(EMAIL_REGEX)]);
....
}