Question

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

<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

我第二个@ 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>

这应该有效。

Answer 2

仅当输入控件的状态为错误时才显示<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 个答案: