Angular2 - Aktualisiere Nachricht, wenn das Kontrollkästchen angeklickt wird

Question

Ich habe ein div, das beim Laden eine Nachricht lädt, aber es kann je nachdem, ob eines der drei Kontrollkästchen angeklickt wird, geändert werden. Es gibt drei mögliche Formen zum Ausfüllen, wobei die Formulare bis zur Vervollständigung von # 1 bis # 3 vorliegen (d. H. Formular # 1 muss zuerst vervollständigt werden, dann Formular # 2, dann Formular # 3). Der Benutzer kann basierend auf drei Kontrollkästchen auswählen, welche Formulare er ausfüllen muss.

<div class="col-sm-3 statusTextField">Status:&nbsp;&nbsp; 
    <div style="display: inline;" [style.color] ="statusColor"> 
    <span style="font-size: x-large;">&#x25CF;</span> 
    </div>&nbsp;{{status}} 
</div> 

Und die drei Kontrollkästchen

<label class="checkbox-inline"> 
    <input type="checkbox" value="form1" [ngModel]="form1" [formControl]="generalForm.controls['form1']" (click)="updateStatusOnCheckboxClick()">form1 
</label> 

<label class="checkbox-inline"> 
    <input type="checkbox" value="form2" [ngModel]="form2" [formControl]="generalForm.controls['form2']" (click)="updateStatusOnCheckboxClick()">form2 
</label> 

<label class="checkbox-inline"> 
    <input type="checkbox" value="form3" [ngModel]="form3" [formControl]="generalForm.controls['form3']" (click)="updateStatusOnCheckboxClick()">form3 
</label> 

Wenn ich die Klick-Funktion aufrufen, möchte ich daher den Status einzustellen. Wenn Formular 1 und Formular 2 ausgewählt sind, möchte ich den Status auf "Formular 1 Ausstehend" setzen. Grundsätzlich sollte der Status das erste Formular in der ausstehenden Liste sein, basierend auf dem, was sie auswählen. Ich habe eine Funktion namens updateStatusOnCheckboxClick(), die ich verwenden möchte, um den Status zu steuern. Wenn ich versuche, den Wert einfach zu übergeben und bedingte Anweisungen darauf zu geben, bleibt er zurück, und wenn ich die Kontrollkästchen 1 und 2 anwähle, sieht das Klickereignis nur diese form1 == 1 und setzt den Status auf "Form 1 Pending".

Wenn ich hinzufügen, eine ID zu den Eingabefeldern, konnte ich die ID an die Funktion mit so etwas wie updateStatusOnCheckboxClick(this.id) passieren und dann würde die Funktion wie folgt aussehen:

//If the id for checkbox is 'Form1' 
updateStatusOnCheckboxClick(id:string) { 
    if(id == "form1") { 
    this.status = "Form 1 Pending"; 
    } 
    //The else will check if form2 is the lowest. If form1 is selected 
    // 
    else if(id == "form2") { 
    this.status = "Form 2 Pending"; 
    } 
    else if(id == "form3") { 
    this.status = "Form 3 Pending"; 
    } 
} 

Answer 1

Versuchen:

<label class="checkbox-inline"> 
    <input #form1 type="checkbox" value="form1" [ngModel]="form1" [formControl]="generalForm.controls['form1']" (click)="updateStatusOnCheckboxClick(form1)">form1 
</label> 

Dann sollten Sie innerhalb Ihrer updateStatusOnCheckboxClick() - Funktion Zugriff auf alle Formulareigenschaften wie ID usw. haben.