FormArray内のすべてのチェックボックスをチェック - 角度2反応性フォーム

Question

私は角度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); 
    } 

HERESに私の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/