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

Posted 2023-02-22

【中文标题】如何在 Angular Material 中创建自定义输入错误

【英文标题】：How to create custom input error in Angular Material

【发布时间】：2019-03-23 09:02:33

【问题描述】：

我正在尝试为角度材料输入创建自己的验证器...我想检查是否只有字母、数字和空格有效...我创建了一个自定义 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;

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

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

【问题讨论】：

查看angular docs on writing custom validators，看看它是否为您指明了正确的方向。这是材料之外的东西，并且在角度形式框架的范围内。

【参考方案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 上也会很好。

【参考方案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>

这应该可以。