Angular2-单击复选框时更新消息

我有一个在加载时加载消息的div，但它可以根据是否单击了三个复选框之一进行更改。有三种可能的表格需要填写，表格从1到3待定，即先填写表格1，然后填写表格2，然后填写表格3。用户可以根据三个复选框选择需要填写的表单

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

尝试：

---

然后，在updateStatusOnCheckboxClick函数中，您应该可以访问所有表单属性，如id等。

您可以在click中传递事件，该事件将与updateStatusOnCheckboxClick$事件类似

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

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

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