Angular 反应形式至少在字段上验证不为空并且验证器的“生命周期”

如何解决Angular 反应形式至少在字段上验证不为空并且验证器的“生命周期”

我想验证表单中至少有一个字段不为空 - 至少有一个字段已归档。我创建了自定义验证器：

import { FormControl,FormGroup,ValidationErrors,ValidatorFn } from "@angular/forms";

export const pfkValidator: ValidatorFn = (abstractControl: AbstractControl): ValidationErrors | null => {
  let fg = (abstractControl as FormGroup);
  let isValid = false;
  Object.keys(fg.controls).forEach(
    field => {
      const ctrl = fg.get(field);
      if (ctrl instanceof FormControl) {
        console.log('ctrl value',ctrl.value);
        if (ctrl.value) {
          isValid = true;
        }
      }
    });

  if (isValid) return { 'valid': true }
  return null;
}

表单是这样初始化的：

ngOnInit(): void {
    this.form = this.fb.group({
      Field1: [null],Field2: [null],Field3: [null],Field4: [null],Field5: [null],Field6: [null],Field7: [null],Field8: [null],Field9: [false],Field10: [false],},{ validators: pfkValidator });
}

问题是当表单加载时，每个字段的验证都被激活，这需要相当长的时间。我的表单有 10 个字段，我在控制台中记录了 10x10 个输入。

这是预期的行为吗？

解决方法

下面是您的实现，它在控制台中显示了 121 个日志

Stackblitz demo

但是在下面使用 FormArrays 的实现中，我试图减少运行操作以避免循环 Demo using FormArrays。控制台现在最初只显示 14 个日志，每次编辑 1 个日志。您甚至可以添加 updateOn: 'blur' 以进一步提高性能

export const pfkValidator: ValidatorFn = (
  abstractControl: AbstractControl
): ValidationErrors | null => {
  console.log("ctrl value",abstractControl.value.join(""));
  if (abstractControl.value.join("") !== "") {
    return { atLeastOne: false };
  }
  return null;
};

这可以像下面那样实现

export class AppComponent {
  form: FormGroup;
  constructor(private fb: FormBuilder) {}
  get fields() {
    return this.form.get("fields") as FormArray;
  }
  ngOnInit(): void {
    this.form = this.fb.group({
      fields: this.fb.array(
        [null,null,false,false],{ validators: [pfkValidator] }
      )
    });
  }
}

在 html 中

<form [formGroup]='form'>
  <ng-container formArrayName='fields'>
    <input *ngFor="let control of fields.controls; let i = index" [formControlName]="i">
  </ng-container>

</form>