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>

我上面的代码，我试图将红色底部边框设置为：

触及字段且未满足required提交条件
触摸字段且电子邮件字符串无效

第一个条件是使用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)]);
....
}

希望这有帮助。

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

1 个答案: