Beim Klicken auf ein Kontrollkästchen markiert alle Warum?

Question

Hallo, Ich bin der Gestaltung checbox mit mehreren Werten, aber wenn ich ein Checkbox klicken wählt sie alle

<div [ngClass] = "{'form-group': true}"> 
       <label>{{initialInformationDetails.objectiveOfUtilisingServiceText}}</label> 
      <div> 
       <label *ngFor = "let objective of initialInformationDetails.objectiveOfUtilisingService"> 
       <input type="checkbox" 
         name="objective" 
         formControlName = "objectiveOfUtilisingServiceControl" 
         value="{{objective.value}}" 
         [(ngModel)]="userInfo.objective"/> {{objective.value}} 
       </label> 
       </div> 
      </div> 

Answer 1

Verwenden [geprüft] anstelle von [(ngModel)]

<div [ngClass] = "{'form-group': true}"> 
       <label>{{initialInformationDetails.objectiveOfUtilisingServiceText}}</label> 
      <div> 
       <label *ngFor = "let objective of initialInformationDetails.objectiveOfUtilisingService"> 
       <input type="checkbox" 
         name="objective" 
         formControlName = "objectiveOfUtilisingServiceControl" 
         value="{{objective.value}}" 
         [checked]="userInfo.objective"/> {{objective.value}} 
       </label> 
     </div> 
</div> 

Answer 2

Da Sie eine reaktive Form verwenden, verwenden Sie sie. Es wird davon abgeraten, ngModel mit einer reaktiven Form zu verwenden. In der ReactiveFormsModule ist die ngModel Direktive nicht einmal enthalten.

Da Sie mehrere Kontrollkästchen haben, sollten Sie einen FormArray verwenden, um die Werte zu erfassen. Wir könnten dieses FormArray objectiveOfUtilisingServiceControls nennen.

Dann haben wir eine Methode zum Hinzufügen oder Entfernen der Elemente zum Formular-Array. Wir haben ein Änderungsereignis in der Vorlage, in dem wir die boolean der Checkbox übergeben, das heißt, wenn es aktiviert ist oder nicht, sowie der Artikel wir in der Form Array hinzufügen mögen:

(change)="onChange(objective.value, $event.target.checked)" 

Die onChange Verfahren würde wie folgt aussehen:

onChange(value:string, isChecked: boolean) { 
    let objectiveOfUtilisingServiceControls = 
       <FormArray>this.myForm.controls.objectiveOfUtilisingServiceControls; 

    if(isChecked) { 
    objectiveOfUtilisingServiceControls.push(new FormControl(value)); 
    } else { 
    let index = 
     objectiveOfUtilisingServiceControls.controls.findIndex(x => x.value == value) 
    objectiveOfUtilisingServiceControls.removeAt(index); 
    } 
} 

Wo wir entweder ein neues FormControl zum Formular Array drücken, oder wenn es nicht markiert ist, die wir in Form von Steuer Form Array entfernen.

Da Sie einen Wert haben, der bereits überprüft wurde, müssen wir ihn auch im Formular-Array hinzufügen. Wir können es tun, nachdem wir die Form aufgebaut haben, die wie folgt aussehen: (fb bezieht sich auf Formbuilder)

ngOnInit() { 
    // build form 
    this.myForm = this.fb.group({ 
    objectiveOfUtilisingServiceControls: this.fb.array([]) 
    }); 

//iterate and check which object matches the with the value in 'userInfo.objective' 
for (let obj of this.initialInformationDetails.objectiveOfUtilisingService) { 
    if (obj.value == this.userInfo.objective) { 
     this.onChange(obj.value, true) 
     break; 
    } 
    } 
} 

Und wie für den prechecked Wert in der Vorlage, nur verwenden [checked]:

<label *ngFor="let objective of initialInformationDetails.objectiveOfUtilisingService"> 
    <input type="checkbox" (change)="onChange(objective.value, $event.target.checked)" 
     [checked]="userInfo.objective == objective.value"/> {{objective.value}} 
</label> 

und wenn Sie das Formular absenden, haben Sie alle Werte des Formulars in myForm.value, ändern Sie einfach myForm zu dem tatsächlichen Formularnamen, den Sie haben.