Aktivieren Sie alle Kontrollkästchen in einem FormArray - Angular 2 Reactive Form

Question

Ich habe ein reaktives 2-Form-Formular mit einer Liste von Kontrollkästchen, die Daten gebunden sind. Das funktioniert gut, aber jetzt muss ich eine Schaltfläche hinzufügen, um alle Kontrollkästchen zu aktivieren.

Heres, wie mein FormGroup konfiguriert ist:

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

Wie würde ich die FormArray Zugriff auf alle Kontrollkästchen setzen, wie überprüft?

Answer 1

1. Fügen Sie Ihrer Vorlage einen formGroupName und einen formControlName hinzu. (Damit Angular 2+ wissen kann, wie sich das DOM und die FormGroup-Struktur verhalten.)
2. Löschen Sie [formControl] = "chapter" aus Ihrer Vorlage. (Sie brauchen das nicht.)
3. Fügen Sie Ihrer Vorlage eine Schaltfläche hinzu.
4. Verwenden Sie die Eigenschaft "value" (um ein gültiges Array zu erhalten) und die Methode "setValue" (um das manipulierte Array zurückzugeben).

Ihre Vorlage wird wie folgt aussehen:

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

Die Methode, die Sie zu Ihrer Klasse hinzufügen:

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

Eine Arbeits Plunk: http://embed.plnkr.co/8yXBn1DhboiIwRIv7AS0/