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

Question

您好我正在尝试使用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>

我上面的代码,我试图把红色底部边框,如果:

1. 触摸字段并且required不满足字段条件

2. 触摸字段并且存在无效的电子邮件字符串

第一个条件是使用username.untouched || username.valid?'primary':'warn'但无法验证电子邮件.任何建议.

编辑:我尝试使用<md-hint>as:

<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>

它适用于必需但不适用于错误的电子邮件.

Answer 1

使用<md-error>,您不必担心错误验证样式.

HTML:

<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>

TS:

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)]);
....
}

希望这可以帮助.