如何显示模式验证消息？

Question

我向模板添加了模式属性

<input class="form-control" type="text" id="elementName"
                                   [(ngModel)]="elementName" name="elementName"
                                   (input)="onElementNameChanged()" #name="ngModel" required pattern="[A-Za-z0-9_)*\S]*" >

如何添加输入不正确时显示的消息？

像这样的东西不会工作：

<div [hidden]="!name.errors.pattern"
     class="alert alert-danger">
     Name must match pattern
</div>

Answer 1

我强烈建议您使用ReactiveForms而不是TemplateDrivenForms因为它们非常适合管理验证模式和消息。

HTML 片段示例：

<form novalidate [formGroup]="user" (ngSubmit)="onSubmit()">

    <div formGroupName="account">

      <md-input-container>
        <input md-input type="text" placeholder="{{'USER.EMAIL' | translate}} *" formControlName="email" autocomplete="off">
        <md-hint class="error" *ngIf="user.get('account.email').hasError('required') && user.get('account.email').touched">
          {{'VALIDATOR.EMAIL_RQ' | translate}}
        </md-hint>
        <md-hint class="error" *ngIf="user.get('account.email').hasError('pattern') && user.get('account.email').touched">
          {{'VALIDATOR.WRONG_EMAIL' | translate}}
        </md-hint>
      </md-input-container>

      <md-input-container>
        <input md-input type="password" placeholder="{{'USER.PASSWORD' | translate}} *" minlength="6" formControlName="password" autocomplete="off">
        <md-hint class="error" *ngIf="user.get('account.password').hasError('required') && user.get('account.password').touched">
          {{'VALIDATOR.PWD_RQ' | translate}}
        </md-hint>
      </md-input-container>

    </div>

    <button md-raised-button [disabled]="!user.valid || submitted" color="accent" type="submit" class="submit-button">
      {{'LOGIN.BUTTON' | translate}}
    </button>

  </form>

此 HTML 示例显示了带有验证的登录表单。请注意仅当表单的特定字段出现验证错误时md-hint元素如何显示。

您实际上可以设置一个接口来匹配您的ReactiveForm. 这是链接到示例的界面：

export interface Account {
  account: {
    email: string;
    password: string;
  }
}

TypeScript 示例片段：

  import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { EmailRegex } from 'app/shared/shared.interface'; // Imported regex for validator


  ...

  user: FormGroup;

  ngOnInit() {
    ...

    // Init your reactive form
    this.user = this.formBuilder.group({
      account: this.formBuilder.group({
        email: ['', [Validators.required, Validators.pattern(EmailRegex)]],
        password: ['', Validators.required]
      })
    });
  }

请注意表单组如何与界面相匹配。另外，如果您愿意，您可以在那里设置表单值，但正如您所看到的，我的字段email设置password为空字符串值。请注意，您还可以在链接到该字段的数组中添加任意数量的验证器。

submit()然后，您可以直接从您的主要访问您的表单值FormGroup：

this.user.value.account.email

如果这个例子还不够好，我强烈建议你阅读 Todd Motto 的指南，其中ReactiveForms解释得非常好：

https://toddmotto.com/angular-2-forms-reactive