Question

我正在尝试以angular6反应形式添加多个正则表达式模式。从一个答案我得到了这个

ceInterfacename: new FormControl('', [
    Validators.required,
    this.regexValidator(new RegExp('^[0-9]+$'), {'number': ''})
  ]),

以HTML

 <mat-form-field>
   <input matInput id='ceInterfacename' placeholder="CE Interface Name *"
      formControlName="ceInterfacename" [readonly]='isEditing && disableCeinterface()' />
   <mat-error
      *ngIf="peAddForm.controls.ceInterfacename.hasError('required') && (peAddForm.controls.ceInterfacename.dirty || peAddForm.controls.ceInterfacename.touched)">
      CE Interface Name is required
   </mat-error>
   <mat-error
      *ngIf="peAddForm.controls.ceInterfacename.hasError('number')">
      XYZ Interface Name is invalid
   </mat-error>
</mat-form-field>

问题是没有显示错误提示文字 XYZ接口名称无效

但是突出显示输入无效。

请帮助

Answer 1

我认为您应该开始使用ErrorStateMatcher和CustomValidators，其中在验证器中定义了正则表达式。

自定义验证者示例

import {AbstractControl, ValidationErrors} from '@angular/forms';


export class CustomValidators {

   static onlyWhitespace(control: AbstractControl): ValidationErrors | null {
    if ((control.value.trim() === '')) {
      return {onlyWhitespace: true};
    }
  }
}

错误状态匹配器可以在Angular文档中找到

https://material.angular.io/components/input/examples

在表单组中设置验证器：

ceInterfacename: new FormControl('', [
    Validators.required,
    CustomValidators.youCusotmValidatorsName,
  ]),

在html中，您可以像这样调用验证器

        <mat-error *ngIf="yourformControlname.hasError('you custom validators name')">Error text to show</mat-error>

Stackblitz示例：https://stackblitz.com/edit/angular-material-2-nerwab

Answer 2

您可以使用this.regexValidator(new RegExp('^[0-9]+$'), {'number': ''})代替Validators.pattern(/^[0-9]+$/)。然后，当然必须在模板中检查*ngIf="peAddForm.controls.ceInterfacename.hasError('pattern')"。

另一种方法是应用自定义验证器（请查看“自定义验证器”下的文档https://angular.io/guide/form-validation）。

如何在angular6中具有多个Regex模式验证器

2 个答案: