Angular 选中所有复选框8

我的复选框表单中有多个复选框数组。当用户单击“全选”按钮时，我需要选中所有复选框。通过使用

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

    <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>

Html文件

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

    <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>

{{item.value.name}


全选

尝试全部选择时出错：

错误：必须为名为“header”的表单控件提供一个值

---

我无法找出错误所在，需要一些指导和建议。

您当前的设置没有意义，每个复选框都有一个正式的数组。你应该把所有的复选框都放在一个表格里。另外，

标题

表单控件在任何地方都是重复的。改为将代码更改为只包含一次

标题

，并将

接收摘要

中的复选框更改为数组：

ngOnInit（）{
this.form=this.formBuilder.group({
标题：['']，//在formarray之外
receivedSummons:this.formBuilder.array（[]）
});
这个.getReceivedSummons（）；
}
getReceivedSummons（）{
this.inquiryStore.com.subscribe（结果=>{
this.receivedSummon=结果；
这个.addCheckBox（）；
this.isShowResponse=true；
});
}
添加复选框（）{
this.form.get（'header'）.setValue（this.receivedSummon.header）
this.receivedSummon.data.items.map（x=>{
此.formReceivedSummons.push(
此为.formBuilder.group({
名称：x.itemNo，
被检查：错误
}))
});
}

然后在模板中进行更改，移除内部模板阵列：

{{callout.value.name}

最后，在

选择所有

复选框中，使用地图，但访问

isChecked

表单控件：

selectAll（）{
this.formReceivedSummons.controls.map（value=>value.get（'isChecked'）.setValue（true））；
}

---

我可以问一下为什么你们有几个正式的约会吗。在我看来，根据您的代码，每个formarray中只有一个复选框。为什么不在一个数组中设置复选框呢？因为我的复选框是基于我得到的对象响应，这里是stackblitz演示..是的，在那里我们可以看到每个formarray只有一个复选框，并且标头是重复的。你应该重组你的表格。你能在stackblitz上给我看一下吗？我没有意识到每个项目都有重复的

标题

。比如说，如果我只想提交选中的复选框，我该如何实现这一点？通过筛选

isChecked

value？是的，您可以使用

filter

获取选中的值：）我正在尝试筛选，但仍然得到了2项，即使我只选中了一个复选框..可以建议解决方案吗

this.formReceivedSummons.value.filter（x=>x.isChecked==true）