Dynamische Formen Angular 2 - Checkbox

Question

Ich bin neu in Angular 2. Ich versuche dynamische Formen nach https://angular.io/guide/dynamic-form zu erweitern. Ich habe Radios eingegeben und arbeite so, wie ich es brauche. Aber jetzt versuche ich Checkboxen zu machen, aber es gibt ein Problem. Ich habe eine Gruppe von Kontrollkästchen und ich bekomme nur booleschen Wert, wenn ein Kontrollkästchen aktiviert ist. Knospe Ich brauche Werte, welche Ankreuzfelder markiert sind. Es gibt meinen Plünderer: https://plnkr.co/edit/EhtpprYdXIFmYJG7Lzxg

Danke für Hilfe!

Answer 1

Ich hoffe, das wäre die Lösung für Sie.

templet.html

<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)"> 
    <ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" > 
    <input type="checkbox" [value]="flight.id" formControlName="flightid" 
     (change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" > 
    </ng-template> 
</form> 

component.ts

flightids Array wird eine andere Anordnungen wie diese [[true 'ID_1'], [false, 'ID_2'], [wahr, 'id_3'] ...] hier true bedeutet Benutzer hat es überprüft, false bedeutet user checked dann unchecked es. Die Elemente, die Benutzer noch nie überprüft haben, werden nicht in das Array eingefügt.

flightids = []; 
confirmFlights(value){ 
    //console.log(this.flightids); 

    let confirmList = []; 
    this.flightids.forEach(id => { 
     if(id[0]) // here, true means that user checked the item 
     confirmList.push(this.flightList.find(x => x.id === id[1])); 
    }); 
    //console.log(confirmList); 

} 

Answer 2

Warum es nicht funktioniert:

weil Sie eine Formcontrol Schlüssel (question.key === 'Fähigkeiten') für alle drei Kontrollkästchen verwenden.

<span *ngSwitchCase="'checkbox'"> 
    <p *ngFor="let opt of question.options"> 
     <input [formControlName]="question.key" 
     [id]="opt.key" type="checkbox" [value]="opt.key"> 
      <label>{{opt.value}}</label></p> 
</span> 

Wie damit umgehen:

Sie sollte Formcontrol Schlüssel für jeden Eingang (Checkbox) verwenden, Modelländerungen zu verfolgen - das ist, wie Eckige Formen arbeitet.

Also, wenn Sie geteilt Ihre Checkbox.options zu separaten Kästchen zum Ankreuzen, würde es funktionieren:

in dynamisch-form-question.component.html Änderung Kästchen zum Ankreuzen an:

in frage.service.ts ändern Checkbox zu:

new CheckboxQuestion({ 
    key: 'fast', 
    label: 'Fast', 
    value: false, 
    order: 5 
}), 

Hier wird Plunker geändert: https://plnkr.co/edit/2XIfMU?p=preview