如何在 Angular Material 中创建自定义输入错误

Question

我正在尝试为角度材料输入创建自己的验证器...我想检查是否只有字母、数字和空格有效...我创建了一个自定义 void 来检查这个，但我可以'不能让它工作...... 这是我的代码：

<md-input-container class="full-width" >
  <input name="nombre" required [(ngModel)]="name" mdInput placeholder="Nombre">
  <md-error *ngIf="checkSpecialCharacters()">Se han ingresado caracteres invalidos</md-error>
</md-input-container>

和 TS

valid = true;
public name: string;
checkSpecialCharacters () {
  this.valid = true;
  if (this.name.length > 0) {
    for (let i = 0; i < this.name.length; i++) {
      if (this.name.charAt(i).match(/^[^a-zA-Z0-9 ]/) !== null) {
        this.valid = false;
      }
    }
  }
  return this.valid;
}

我应该使用哪个语句？或如何？谢谢

（这是一个西班牙语应用程序，这就是为什么会有一些西班牙语单词）

Answer 1

<mat-error> 元素只有在输入控件的状态为错误时才会显示（参见这篇文章：Angular material: mat-error not showing despite true methods）。当你使用 ngModel 代替 formControl 时，事情会稍微复杂一些，但原理是一样的，因为 ngModel 内部使用了一个 FormControl。

当使用响应式表单和 FormControl 时，最简单的做法是将自定义验证器添加到您输入的 FormControl（您也可以使用 ngModel 来做到这一点 - 但因为您必须通过 ngModel 引用 FormControl，所以工作量更大这需要使用 ViewChild 等）。

使用 ngModel 和 Angular Material 执行此操作的最简单方法是简单地为 MatInput 使用自定义 ErrorStateMatcher。这将负责自动引用内部 FormControl。看看https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown。

然后，您将从 ErrorStateMatcher 内部调用您的 checkSpecialCharacters 函数，而不是从 mat-error ngIf:

import {FormControl, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher {

  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    if (control && control.invalid 
        && (control.touched || (form && form.submitted))) {
      return true;
    } else {
      return !checkSpecialCharacters(control.value);
    }
  }
}

更新组件：

errorStateMatcher: ErrorStateMatcher = new MyErrorStateMatcher();

checkSpecialCharacters(value: string): boolean {
  let valid = true;
  if (value && value.length > 0) {
    for (let i = 0; i < this.name.length; i++) {
      if (value.charAt(i).match(/^[^a-zA-Z0-9 ]/) !== null) {
        valid = false;
      }
    }
  }
  return valid;
}

HTML：

<md-input-container class="full-width" >
  <input name="nombre" required [(ngModel)]="name" mdInput placeholder="Nombre" [errorStateMatcher]="errorStateMatcher">
  <md-error>Se han ingresado caracteres invalidos</md-error>
</md-input-container>

请注意，这是基于我对 Angular Material 6 的了解 - 我相信它在 v2 上也会很好。

Answer 2

我赞同@p4r1 的评论。这是在角形框架工作的范围内。我可以向您展示我是如何在我的使用中创建自定义验证的。

如果我们使用 form 而不是 ngModel 会更容易处理。我假设您的工作不需要模板驱动模型。

在您的 TS 文件中：

form = new FormGroup({
  name: new FormControl('', checkSpecialCharacters().bind(this))
});

checkSpecialCharacters(): ValidatorFn {
  return (control: AbstractControl) => {
    if (control.value.length > 0) {
      for (let i = 0; i < control.value.length; i++) {
        if (control.value.charAt(i).match(/^[^a-zA-Z0-9 ]/) !== null) {
          return {'error': {value: control.value}};
        }
      }
     }
    };
  }

在您的 HTML 中：

如果 ngmodel 使用 formControlName= name 并在您的 *ngIf 中使用 *ngIf="name.error" ，即：

 <md-error *ngIf="name.error">Se han ingresado caracteres invalidos</md-error>

这应该可以。