Question

我试图使用角度素材的md-error指令显示自定义错误消息，因此我在下面编写了该方法：

打字稿文件

browse.path

HTML文件

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

Plunker

在上面的代码段中，我尝试使用<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>显示特定于无效输入的自定义错误消息。

但是，如果我输入的值无效，则上述方法不起作用。输入的下划线变为红色，并且不显示错误文本*ngIf="validateNICInput"。

以下是我尝试但迄今为止失败的其他方法：

方法2

Please enter a valid NIC

方法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.validateNICInput">
      Please enter a valid NIC
    </md-error>
  </md-form-field>
</form>

但上述其他方法都没有。

Answer 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

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

1 个答案: