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

Question

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

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>

当我尝试 select all:

时出现错误

Error: Must supply a value for form control with name: 'header'.

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

Answer 1

您当前的设置没有意义，每个复选框都有一个格式数组。你应该把所有的复选框都放在一个数组中。此外，header 表单控件到处都是重复的。而是将您的代码更改为 header 一次，并且 receivedSummons 格式数组中的复选框：

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
      }))
  });
}

然后在模板中进行更改，删除内部格式数组：

<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

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

Select all checkbox reactive forms Angular 8

checkbox

angular

angular-reactive-forms

formarray

formgroups