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

您当前的设置意义不大，因为每个复选框都有一个formarray。您应该将所有复选框粘贴在一个formarray中。 data.forEach(el => { result += `<li>${el.title}</li>` });表单控件也随处可见。而是将您的代码更改为一次拥有header，并选中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
      }))
  });
}

然后最后使用<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

Finally your forked STACKBLITZ

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

1 个答案: