CODEWITHSUNDEEP
angular
kishore
kishore

Reputation: 93

On click one checkbox selects all Why?

Hi i'm designing checbox with multiple values but when i click one checkbox it selects all

 <div [ngClass] = "{'form-group': true}">
              <label>{{initialInformationDetails.objectiveOfUtilisingServiceText}}</label>
             <div>
                <label *ngFor = "let objective of initialInformationDetails.objectiveOfUtilisingService">
                <input type="checkbox" 
                       name="objective"
                       formControlName = "objectiveOfUtilisingServiceControl"
                       value="{{objective.value}}" 
                       [(ngModel)]="userInfo.objective"/> {{objective.value}}
                </label> 
              </div>
            </div>

Upvotes: 1

Views: 741

Answers (2)

AVJT82
AVJT82

Reputation: 73367

Since you are using a reactive form, utilize it. It is discouraged to use ngModel with a reactive form. In the ReactiveFormsModule the ngModel directive is not even included.

Since you have several checkboxes, you should use a FormArray to capture the values. We could call that FormArray objectiveOfUtilisingServiceControls.

Then we have a method for the adding or removing of the items to the form array. We have a change event in the template, in which we pass the boolean of the checkbox, meaning if it's checked or not, as well as the actual item we want to add to the form array:

(change)="onChange(objective.value, $event.target.checked)"

The onChange method would look like this:

onChange(value:string, isChecked: boolean) {
  let objectiveOfUtilisingServiceControls = 
               <FormArray>this.myForm.controls.objectiveOfUtilisingServiceControls;

  if(isChecked) {
    objectiveOfUtilisingServiceControls.push(new FormControl(value));
  } else {
    let index = 
      objectiveOfUtilisingServiceControls.controls.findIndex(x => x.value == value)
    objectiveOfUtilisingServiceControls.removeAt(index);
  }
}

Where we either push a new FormControl to the form array, or if it's unchecked we remove the form control from the form array.

Since you have some value that is prechecked, we also need to initially add that one in the form array. We can do it after we have built the form, which can look like this: (fb is referring to Formbuilder)

ngOnInit() {
  // build form
  this.myForm = this.fb.group({
    objectiveOfUtilisingServiceControls: this.fb.array([])
  });

//iterate and check which object matches the with the value in 'userInfo.objective'
for (let obj of this.initialInformationDetails.objectiveOfUtilisingService) {
    if (obj.value == this.userInfo.objective) {
      this.onChange(obj.value, true)
      break;
    }
  }
}

And as for the prechecked value in the template, just use [checked]:

<label *ngFor="let objective of initialInformationDetails.objectiveOfUtilisingService">
  <input type="checkbox" (change)="onChange(objective.value, $event.target.checked)"
        [checked]="userInfo.objective == objective.value"/> {{objective.value}}
</label>

and when you submit the form, you have all values of the form in myForm.value, just change myForm to the actual form name you have.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222692

Use [checked] instead of [(ngModel)]

<div [ngClass] = "{'form-group': true}">
              <label>{{initialInformationDetails.objectiveOfUtilisingServiceText}}</label>
             <div>
                <label *ngFor = "let objective of initialInformationDetails.objectiveOfUtilisingService">
                <input type="checkbox" 
                       name="objective"
                       formControlName = "objectiveOfUtilisingServiceControl"
                       value="{{objective.value}}" 
                       [checked]="userInfo.objective"/> {{objective.value}}
                </label> 
         </div>
</div>

Upvotes: 1

Related Questions