CODEWITHSUNDEEP
angularcheckbox
user3334871
user3334871

Reputation: 1361

Angular2 - update message if checkbox is clicked

I have a div that loads a message on load, but it can be changed based on whether one of three checkboxes is clicked. There are three possible forms to fill, with the forms pending completion from #1 to #3 (i.e, form#1 needs to be completed first, then form#2, then form#3). The user is able to select which forms they need to complete based on three checkboxes.

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

And the three checkboxes

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

When I call the click function, I want to set the status accordingly. If form 1 and form 2 are selected, I want to set the status to something like "Form 1 Pending". Basically, the status should be the first form in the list pending based on what they choose. I have a function called updateStatusOnCheckboxClick() that I want to use to control the status. If I try to just pass the value and do conditional statements on that, it lags, and if I select checkbox 1, and then 2, the click event will only see that form1 == 1 and set the status to "Form 1 Pending".

If I add an ID to the input fields, could I pass the ID to the function with something like updateStatusOnCheckboxClick(this.id) and then the function would look like:

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

Upvotes: 0

Views: 145

Answers (1)

salmore
salmore

Reputation: 135

Try:

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

Then within your updateStatusOnCheckboxClick() function you should have access to all the form properties, like id etc..

Upvotes: 1

Related Questions