时间戳

首页 > 解决方案 > 如何检查Angular反应形式中的所有复选框

angular - 如何检查Angular反应形式中的所有复选框

问题描述

我有一个显示复选框列表的 Angular 表单：

<tbody formArrayName="approvedInvoices"
  *ngFor="let approvedInvoice of approvedInvoices; let i = index">
  <tr>
    <td>
        <input type="checkbox" 
          [formControlName]="i" id="{{i}}">
    </td>
    <td style="padding-top: 18px">
      Invoice Number {{approvedInvoice.invoiceNumber}}
    </td>
</tbody>

我在 ngInit() 中创建表单：

approvedInvoices: ApprovedInvoice[];

this.controls = this.approvedInvoices.map(c => new FormControl(false));
  this.form = this.formBuilder.group({
    approvedInvoices: new FormArray(this.controls)
  });

这是我的模型：

export class ApprovedInvoice {
    invoiceNumber: string;
}

这很好用，但我的问题是我不知道如何做一个 'select all' 。我可以得到这样检查的发票列表：

selectedInvoices() {
  return this.form.value.approvedInvoices
    .map((v, i) => v ? this.approvedInvoices[i] : null)
    .filter(v => v !== null);
}

但我不知道如何检查所有的框。

到目前为止，我有这个：

selectAll() {
  for (var _i = 0; _i < this.form.value.approvedInvoices.length; _i++) {
    this.form.value.approvedInvoices[_i] = true;
  }

它将所有发票标记为已选中，但复选框输入不会更改（即，未勾选

标签： angulartypescript

解决方案

使用 setValue 方法设置 formArray 中单个表单控件的值

selectAll(){
    this.form.get('approvedInvoices').controls.map(control=>{
      control.setValue(true);
    });
  }

推荐阅读