在角度材料 2 中显示 md-error 的自定义错误消息答案

【问题标题】：show custom error message for md-error in angular material 2在角度材料 2 中显示 md-error 的自定义错误消息
【发布时间】：2018-03-08 00:56:16
【问题描述】：

我正在尝试使用 angular material 中的 md-error 指令显示自定义错误消息，因此我在下面编写了该方法：

打字稿文件

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

@Component({
  selector: 'input-errors-example',
  templateUrl: 'input-errors-example.html',
  styleUrls: ['input-errors-example.css'],
})
export class InputErrorsExample {

  nicFormControl = new FormControl('', [
    Validators.required,
    validateNICInput ]);

}

// custom error checking 
function validateNICInput(c: FormControl) {

  let NIC_REGEX_OLD = /(^\d{9}[V|v|x|X]$)/; // Regular Expression 1
  let NIC_REGEX_NEW = /[0-9]{12}$/;         // Regular Expression 2

  var old_statement = NIC_REGEX_OLD.test(c.value);
  var new_statement = NIC_REGEX_NEW.test(c.value);

  return ( old_statement || new_statement) ? true : {
            validateInput: {
              valid: false
            }
        };
}

HTML 文件

<form class="example-form">
  <md-form-field class="example-full-width">
    <input mdInput placeholder="NIC" [formControl]="nicFormControl">
    <md-error *ngIf="nicFormControl.hasError('required')">
      NIC is <strong>required</strong>
    </md-error>
    <md-error *ngIf="validateNICInput">
      Please enter a valid NIC
    </md-error>
  </md-form-field>
</form>

Plunker

在上面的代码 sn-p 中，我尝试使用 *ngIf="validateNICInput" 显示特定于 invalid inputs 的自定义错误消息。

但是，如果我输入了无效值，上述方法将不起作用。输入的下划线变为红色并且不显示错误文本Please enter a valid NIC。

以下是我尝试过但目前失败的其他方法：

方法 2

<form class="example-form">
  <md-form-field class="example-full-width">
    <input mdInput placeholder="NIC" [formControl]="nicFormControl">
    <md-error *ngIf="nicFormControl.hasError('required')">
      NIC is <strong>required</strong>
    </md-error>
    <md-error *ngIf="nicFormControl.validateNICInput">
      Please enter a valid NIC
    </md-error>
  </md-form-field>
</form>

方法 3

<form class="example-form">
  <md-form-field class="example-full-width">
    <input mdInput placeholder="NIC" [formControl]="nicFormControl">
    <md-error *ngIf="nicFormControl.hasError('required')">
      NIC is <strong>required</strong>
    </md-error>
    <md-error *ngIf="nicFormControl.hasError(validateNICInput)">
      Please enter a valid NIC
    </md-error>
  </md-form-field>
</form>

但上述其他方法都不起作用。

【问题讨论】：

标签： angular validation typescript angular-material

【解决方案1】：

您的验证器返回错误。请改用此语句：

Typescript:

return ( old_statement || new_statement) ? true : { invalidNIC: true };

HTML:

<md-error *ngIf="nicFormControl.hasError('invalidNIC')">
  Please enter a valid NIC
</md-error>

Plunker

【讨论】：