Checkbox Ereignisbindung mit Knopf in angular2

Question

Ich benutze eckig. Ich habe eine Eingabe type"checkbox" und eine Schaltfläche daneben. Wenn Sie auf die Schaltfläche klicken, wird eine Methode aufgerufen: abc(). Ich muss prüfen, ob das Kontrollkästchen aktiviert ist oder nicht.

app.component.html

<input type="checkbox" id="chckbx"> 
<button (click)="abc();" class="btn btn-success">Search </button> 

app.component.ts -

abc(){} 

Answer 1

Nun eine einfache Lösung für Ihr Problem ist einfach Zweiweg manuell

Bindung zu verwenden,

<input type="checkbox" [checked]="isChecked" (change)="isChecked = $event.target.checked" id="chckbx" style="width:30px;height:30px;" > 
<button (click)="abc();" class="btn btn-success" style="height: 30px;padding: 0px 30px">Search </button> 

    //in your component use this code 
    isChecked = false; 

    abc() { 
     if (!this.isChecked) { 
      console.log('Checkbox cannot be unchecked...'); 
     } 
    } 

Es wird das Problem lösen. Ich empfehle jedoch, zwei Wege zu lernen Datenbindung [(ngModel)] Ansatz. Aber Sie müssen einige Module richtig importieren, um ngModel zu verwenden.

Answer 2

Sie die Referenz der Checkbox in der click Methode übergeben kann. Sie müssen die #var Vorlage Notation verwenden:

<input type="checkbox" id="chckbx" #chkbox> 
<button (click)="abc(chkbox)" class="btn btn-success">Search</button> 


abc(checkbox: HTMLInputElement) { 

    console.log(checkbox.checked); 

} 

Answer 3

Bind die checkbox Wert mit ngModel. Dann verwenden Sie es in der abc() Funktion.

html:

<input type="checkbox" id="chckbx" style="width:30px;height:30px;" [(ngModel)]="checked" > 

<p> 
<button (click)="abc();" class="btn btn-success">Search </button> 
</p> 

app.component.ts:

checked: boolean = true; 

abc(){ 
    alert(this.checked); 
    } 

demo

Answer 4

<input type="checkbox" 
    [ngModel]="value" 
    (ngModelChange)="changeValue()" 
    id="chckbx"> 
<button (click)="abc();" class="btn btn-success">Search </button> 


changeValue() : void { 
    this.value = !this.value; 
    } 

abc() : void { 
    console.log(this.value); 
}