2017-08-19 4 views
1

Ich verwende Angular 4 und auf meiner Vorlage habe ich ein Kontrollkästchen und ein div.Winkelprüfung, ob das Kontrollkästchen innerhalb einer Funktion/Methode aktiviert ist

In meiner .ts Datei habe ich 2 Funktionen.

// html 
<input type="checkbox" class="custom-control-input" (change)="function2($event)"> 

<div (click)="function1()">some text here</div> 

Dies Ich habe die ts

Datei
// .ts 

function1() { 
    // check if the checkbox is checked.  
} 

function2(event) { 
    // do something here 
} 

Von function1 wie kann ich überprüfen, ob das Kontrollkästchen aktiviert ist oder nicht?

Antwort

4

Eine der Möglichkeiten, den Wert in function1() zu erhalten, besteht darin, die Template-Variable zu verwenden.

Dann können Sie die folgenden:

1. HTML

<input #input type="checkbox" class="custom-control-input" (change)="function2($event)"> 

Typoskript

@ViewChild('input') private checkInput; 
.... 
function1(){ 
    console.log(this.checkInput.checked? "it's checked": "it's not checked") 
} 

2. HTML

<input #input type="checkbox" class="custom-control-input" (change)="function2($event)"> 
<div (click)="function1(input)">some text here</div> 

Typoskript

function1(element){ 
     console.log(element.checked? "it's checked": "it's not checked") 
} 
+0

Es gibt einen Grund, warum Winkel bietet einen direkten Weg zu handhaben Formen. Tatsächlich bietet es zwei Möglichkeiten (vorlagengesteuerte Formulare und reaktive Formulare) und vergessen dynamisch erstellte Formulare nicht. Ich schlage vor, dass Sie tatsächlich eine davon in Ihrer Antwort verwenden. Ihr Vorschlag wird unrealistisch oder zumindest schwer in größeren Formelementen zu halten sein. Wie sieht Ihr Ansatz mit 30 Formularelementen aus? oder 100 dynamisch erzeugte Eingaben? – lexith

+0

@lexith, danke! Vielleicht antwortete ich "Ein Weg" im Sinne von "einer der Wege", ich wollte nicht sagen "Der Weg". Ich werde versuchen, deinen Vorschlag zu meiner Antwort hinzuzufügen :) – Vega

0

ein id-Attribut auf das Kontrollkästchen hinzufügen

<input id='check1' type="checkbox" class="custom-control-input" (change)="function2($event)"> 

dann den Wert in function1 überprüfen()

function1() { 
    if(document.getElementById('check1').checked) { 
     // do something here 
    } 
Verwandte Themen