选择所有复选框反应形式Angular 8

Question

我的复选框表单中有多个复选框数组。当用户单击全选按钮时，我需要选择所有复选框。通过使用 reactive forms 和 FormArray 这是我尝试过的：

Ts 文件

  get formReceivedSummons() {
    return this.form.get('receivedSummons') as FormArray;
  }

  formReceivedSummonsItems(i: number) {
    return (this.formReceivedSummons.controls[i].get('items')) as FormArray;
  }

  constructor(private inquiryStore: InquiryStoreService, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      receivedSummons: this.formBuilder.array([])
    });
    this.getReceivedSummons();
  }

  getReceivedSummons() {
    this.inquiryStore.summons$.subscribe(result => {
      this.receivedSummon = result;
      this.addCheckboxes();
    });
  }

  selectAllCheckbox() {
    this.formReceivedSummons.controls.map(value => value.setValue(true));
  }

  addCheckboxes() {
    this.formReceivedSummons.setValue([]);
    this.receivedSummon.data.items.map(x => {
      const group = this.formBuilder.group({
        header: [this.receivedSummon.header],
        items: this.formBuilder.array([], [minSelectedCheckboxes(1)])
      });
        (group.get('items') as FormArray).push(this.formBuilder.group({
          name: [x.itemNo],
          isChecked: [false, Validators.required]
        }));
      this.formReceivedSummons.push(group);
    });
  }

HTML 文件

    <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
      <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
        <ng-container [formGroup]="summon">
          <ng-container formArrayName="items" *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index">
            <ng-container [formGroup]="item">
              <input type="checkbox" formControlName="isChecked"> {{item.value.name}}
            </ng-container>
          </ng-container>
        </ng-container>
      </ng-container>
      <br>
    </form>
  <button (click)="selectAllCheckbox()">SELECT ALL</button>

我尝试全选时出错：

错误：必须为表单控件提供一个值，名称为：'header'。

我无法弄清楚错误是什么，可以使用一些指导和建议。

Answer 1

您当前的设置没有什么意义，每个复选框都有一个表单数组。您应该将所有复选框粘贴在一个表单数组中。 header formcontrol 也到处重复。而是将您的代码更改为拥有一次header，并在receivedSummons formarray 中添加复选框：

ngOnInit() {
  this.form = this.formBuilder.group({
    header: [''], // outside formarray
    receivedSummons: this.formBuilder.array([])
  });
  this.getReceivedSummons();
}

getReceivedSummons() {
  this.inquiryStore.summons$.subscribe(result => {
    this.receivedSummon = result;
    this.addCheckboxes();
    this.isShowResponse = true;
  });
}

addCheckboxes() {
  this.form.get('header').setValue(this.receivedSummon.header)
  this.receivedSummon.data.items.map(x => {
    this.formReceivedSummons.push(
      this.formBuilder.group({
        name: x.itemNo,
        isChecked: false
      }))
  });
}

然后在模板中进行修改，去掉内部的formarray：

<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
  <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
    <ng-container [formGroupName]="i">
      <input type="checkbox" formControlName="isChecked"> {{summon.value.name}}
    </ng-container>
  </ng-container>
</form>

最后是selectAll 复选框，像你一样使用地图，但访问isChecked 表单控件：

selectAll() {
  this.formReceivedSummons.controls.map(value => value.get('isChecked').setValue(true));
}

Finally your forked STACKBLITZ