Question

创建了一个不允许使用的新文件编号。请说出我的说法具有误导性，但这只是为了在实际实施之前进行测试。

如果输入值不是hi，则应该发生错误。我在做什么错了。

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

export function NumbersNotAllowed(control: AbstractControl) {
    if (control.value !== 'hi') {
      return { containsNumber: true };
    }
    return null;
  }

在ts文件中

     import { NumbersNotAllowed } from '../validators/numbers-not-allowed'; 
        ngOnInit() {
            this.contactForm = this.formBuilder.group({
              fullName: ['', [Validators.required, Validators.maxLength(70)], NumbersNotAllowed],
        }
        //for convience easy access to form fields
         get c() { return this.contactForm.controls }

    onSubmit() {
        console.log(this.contactForm.value);
        this.submitted = true;
        if (this.contactForm.invalid) {
          return;
        }
      }
}

HTML模板。除自定义验证项外，其余验证过程均有效。

 <form [formGroup]="contactForm" (ngSubmit)="onSubmit()" class="apply-form">
       <div *ngIf="c.fullName.hasError('containsNumber')" data-tip="Error from custom validator"></div>
       <div *ngIf="c.fullName.touched">
       <div *ngIf="c.fullName.hasError('maxlength')" data-tip="Full name cannot be larger than 70 characters"></div>
       </div>
      <input formControlName='fullName' (focus)="nameInput()"
      [ngClass]="{'face error-border': (c.fullName.errors?.required && c.fullName.touched) 
      || c.fullName.errors?.required && submitted && c.fullName.pristine}"
      placeholder="Your Full Name" type="text" tabindex="1">
 </form>

Answer 1

我有一些使用正则表达式的简单自定义验证，当输入的验证次数增加时，这将很有帮助。我已将其应用到您的代码中，共享了链接。请检查是否有帮助 https://stackblitz.com/edit/angular-9omtlr?file=src%2Fapp%2Fapp.component.ts

Answer 2

Yiu已将“ NumbersNotAllowed”验证器添加为异步验证器，并将其添加到数组中“ fullName” FormControl的第二个参数中

ngOnInit() {
    this.contactForm = this.formBuilder.group({
        fullName: ['', [Validators.required, Validators.maxLength(70), NumbersNotAllowed]]
    })
}

Answer 3

将您的自定义验证器移动到sync验证器数组。示例：

表单控件语法为

controlName: ['initalvalue', [sync validators], [async validtors]];

当前代码：

fullName: ['', [Validators.required, Validators.maxLength(70)], NumbersNotAllowed],

修复：

fullName: ['', [Validators.required, Validators.maxLength(70), NumbersNotAllowed],

为什么此自定义验证器不起作用？

3 个答案: