Angular 12 FormGroup动态数组复选框自定义验证器不起作用

Question

我正在创建一个带有材料的Angular 12应用程序。

我有一个从数据库动态加载的复选框数组的表单。

我需要验证至少选择一个复选框，

我在我的oninit（）中这样定义了这样的定义：

 ngOnInit(): void {
    this.form = this.fb.group({
      Id: new FormControl(null),
      Name: new FormControl('',Validators.required),
      Recipents: new FormControl('',[Validators.required, matchingEmailValidator()]),
      IsActive: new FormControl(true),
      ProcessorName: new FormControl('',Validators.required),
      Channel: new FormArray([]),
    }, { validators: [customValidateArrayGroup()] }
    );
}

我需要对频道表单阵列进行自定义验证。如果我在频道的定义中添加它，则在检查时不会发射。因此，我决定以形式级别进行。

我补充说：

{ validators: [customValidateArrayGroup()] }

每次对象更改时，都会触发此验证器。

这是我的自定义验证器：

export function customValidateArrayGroup(): ValidatorFn {
  return function validate(formGroup: FormGroup) {
    let checked = 0
    Object.keys(formGroup.controls).forEach(key => {
      const control = formGroup.controls[key]
      if (control.value) {
        checked++
      }
    })

    if (checked < 1) {
      return {
        requireCheckboxToBeChecked: true,
      }
    }
    return null
  }
}

这是我的HTML，我在其中定义了复选框数组的

 <mat-label><strong>Channel</strong></mat-label>
          <li *ngFor="let chanel of notification.NotificationChannelLogLevels">
            <mat-checkbox id= {{chanel.NotificationLogLevel.Id}} formArrayName="Channel"
            [checked]="chanel.IsActive"
             (change)="changeEventFunc($event)">
              {{chanel.NotificationLogLevel.Name}}
            </mat-checkbox>
          </li>

问题是，我遇到的问题是，单击复选框时自定义验证器不会发射。也许是因为它们是在dinam上加载的，并且没有被 formgroup.controls 认识到

我该如何验证？

Answer 1

在模板中使用formarray和JS数组的混合物很奇怪。当前，您的formarray完全是空的，因此可以预期它在检查复选框时不会运行。您可以选择迭代JS数组，然后按 /删除formarray，然后在接收数据时将值推到formarray，然后在模板中迭代该值。以下解决方案执行后者：

缩短代码。...

构建表格：

this.form = this.fb.group({
  Channel: this.fb.array([], [customValidateArrayGroup()]),
});

我将自定义验证器附加到formarray本身。当您准备好动态数据时，然后迭代它并将表单控件推向您的formarray。我也喜欢使用getter。按下您需要的任何属性，在这里我选择iSactive和name仅：

get channels() {
  return this.form.get('Channel') as FormArray;
}

// when you have data accessible:
this.notificationChannelLogLevels.forEach(value => {
  this.channels.push(this.fb.group({
    isActive: value.IsActive,
    name: value.Name
  }))
})

现在在模板中迭代此formarray：

<div formArrayName="Channel">
  <li *ngFor="let chanel of channels.controls; let i = index">
    <ng-container [formGroupName]="i">
      <mat-checkbox formControlName="isActive">
        {{ chanel.get('name').value}}
      </mat-checkbox>
    </ng-container>
  </li>
  <small *ngIf="channels.hasError('hasError') && channels.touched">
    Choose at least one
  </small>
</div>

自定义验证器检查至少一个复选框字段具有iSActive作为true：

export function customValidateArrayGroup() {
  return function validate(formArr: AbstractControl): ValidationErrors | null {
    const filtered = (formArr as FormArray).value.filter(chk => chk.isActive);
    return filtered.length ? null : { hasError: true }
  };
}

a stackblitz 供您参考。

Answer 2

我认为您的模板中有错误的设置。

当需要将每个复选框应用于父容器时，您将应用每个复选框，

<div formArrayName="myFormArray">
  <div *ngFor="*ngFor="let chanel of notification.NotificationChannelLogLevels; let i = index">
    //Use the index here to dynamically tie each mat-checkbox to a FormControl
    <mat-checkbox [FormControl]="myCheckboxes[i]"></mat-checkbox>
  </div>
</div>

然后在.ts文件中将其应用于formarray，并在其内部使用formarray，并在其内部具有表单控件。否则，myCheckbox [i]将是零件的零件或索引。您可以使用添加到表单组中的表单数组，但是必须定义模板中您引用的索引。

这是一篇很好的博客文章，介绍了如何处理表单阵列中的添加/删除实例，

https://netbasal.com/angular-reactive-forms-the-the-------------------------------to-formarray-3adbe6b0b61a

and

​记录级别是静态的，将复选框控件列表定义为FormGroup并将验证器应用于表单组可能更容易或更直观。