检查 FormArray 中的所有复选框 - Angular 2 Reactive Form

Question

我有一个 angular 2 反应形式，其中包含数据绑定的复选框列表。这工作正常，但现在我需要添加一个按钮来检查所有复选框。

以下是我的 FormGroup 的配置方式：

  private buildForm() {
    this.groupForm = this._formBuilder.group({
      bookId: this._formBuilder.control(null),
      startDate: this._formBuilder.control(null),
      groupTotal: this._formBuilder.control(null),
      chapterGrouping: this._formBuilder.control("all"),
      groupChapters: this.buildChapters()
    });
  } 

  private buildChapters() {
    const chapters = this.chapters.map(chapter => {
      return this._formBuilder.control(chapter.selected)
    });
    return this._formBuilder.array(chapters);
  }

这是我的 HTML：

<div class="form-group">
    <label for="">Select chapters</label>
    <div *ngFor="let chapter of formChapters.controls; let i=index" class="checkbox">
        <label>
        <input type="checkbox"  [formControl]="chapter" >
        {{chapters[i].title}}
        </label>
    </div>
</div>

如何访问 FormArray 以将所有复选框设置为已选中？

Answer 1

1. 将 formGroupName 和 formControlName 添加到您的模板。 （让 Angular 2+ 知道 DOM 和 formGroup 结构之间的关系。）
2. 从您的模板中删除 [formControl]="chapter"。 （你不需要这个。）
3. 为您的模板添加一个按钮。
4. 使用 value 属性（获取有效数组）和 setValue 方法（返回被操作的数组）。

您的模板将如下所示：

<div class="form-group" formGroupName="groupChapters">
    <label for="">Select chapters</label>
    <div *ngFor="let chapter of formChapters.controls; let i = index" class="checkbox">
        <label>
            <input type="checkbox" formControlName="{{i}}">
            {{chapters[i].title}}
        </label>
    </div>
    <button (click)="checkAll()">Check all</button>
</div>

你添加到你的类的方法：

private checkAll() {
    this.groupForm.controls['groupChapters'].setValue(
        this.groupForm.controls['groupChapters'].value
            .map(value => true);
    );
}

一个工作的 Plunk：http://embed.plnkr.co/8yXBn1DhboiIwRIv7AS0/