2017-08-15 12 views
0

ロード時にメッセージをロードするdivがありますが、3つのチェックボックスのいずれかがクリックされたかどうかによって変更できます。 3つの可能なフォームがあり、#1から#3への補完が完了しているフォームがあります(フォーム#1は最初に完了し、次にフォーム#2、フォーム#3を完了する必要があります)。ユーザーは、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> 

と3つのチェックボックス

<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が選択されている場合、ステータスを「フォーム1保留」のように設定したいと考えています。基本的には、ステータスは、選択した内容に基づいて保留中のリストの最初の形式にする必要があります。私はupdateStatusOnCheckboxClick()という機能を持っており、ステータスを制御するために使いたいと思っています。値を渡して条件文を実行しようとすると、それが遅れます。チェックボックス1、2を選択すると、クリックイベントはform1 == 1しか表示されず、ステータスが「フォーム1保留中」に設定されます。

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

このように動作するクリックでイベントを渡すことができます。 eStatusOnCheckboxClick($ event) ' –

答えて

1

試してみてください:

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

は、私はupdateStatusOnCheckboxClick(this.id)のようなものと、関数は次のようになりますと機能にIDを渡すことができ、入力フィールドにIDを追加する場合次にupdateStatusOnCheckboxClick()関数内で、idなどのすべてのフォームプロパティにアクセスする必要があります。