Angular2 - 點擊複選框時更新消息

我有一個在加載時加載消息的div，但可以根據是否單擊三個複選框中的一個來更改它。有三種可能的填表形式，等待從＃1到＃3完成的表格（即形式＃1需要先完成，然後形成＃2，然後形成＃3）。用戶可以根據三個複選框選擇需要完成的表單。Angular2 - 點擊複選框時更新消息

<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>

和三個複選框

<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>

當我呼的一下功能，我想設置相應的狀態。如果選擇表單1和表單2，我想將狀態設置爲「Form 1 Pending」。基本上，狀態應該是基於他們選擇的待決列表中的第一種形式。我有一個叫做updateStatusOnCheckboxClick()的函數，我想用它來控制狀態。如果我試圖傳遞值並做出條件語句，它會滯後，如果我選中複選框1，然後選擇2，則單擊事件將只會看到form1 == 1並將狀態設置爲「Form 1 Pending」。

如果我添加一個ID輸入字段，我可以通過ID的功能與類似updateStatusOnCheckboxClick(this.id)然後該函數將如下所示：

//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"; 
    } 
}

來源

2017-08-15 user3334871

你可以在點擊事件中傳遞事件，就像這樣'updat eStatusOnCheckboxClick（$事件）' –

嘗試：

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

然後在你的updateStatusOnCheckboxClick（）函數中，你應該可以訪問所有的表單屬性，比如id等。

來源

2017-08-15 18:22:52 salmore

Angular2 - 點擊複選框時更新消息

回答

相關問題