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

Question

您好，我正在尝试使用 Angular 2 的 Material 设计来实现表单验证。这是输入字段:

<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>作为:

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

希望这对您有所帮助。