Question

我有一个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;
}

这很好用，但是我的问题是我不知道如何进行“全选”。我可以获得像这样检查的发票清单：

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

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

Answer 1

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

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

Answer 2

  selectAll(): void {

  this.selectAllCheckbox = !this.selectAllCheckbox;

  if (this.selectAllCheckbox) {
      this.services.controls.map(control => control.setValue(true));
    } else {
      this.services.controls.map(control => control.setValue(false));
    }
  }

如何以Angular反应形式检查所有复选框

2 个答案: