All the checkbox is selected in angular 6

Question

I have model class like:

processAnexOne.ts

export class ProcessAnexOne {


    documentList: string;
}

and inside component class i have declared

export class ProcessAnexOneComponent implements OnInit {

processAnexOne: ProcessAnexOne = new ProcessAnexOne();

 }

The problem i am getting is at its HTML file.I have three checkbox but when i click on one of the checkbox all three of the checkboxes is selected. I dont know what is wrong in my code. I just need to select single checkbox.

<div class="form-group col-md-12"> 
  <div class="col-md-4 panel panel-default">
     <h3>Document List</h3>
 <div class="form-check">
  <label class="form-check-label" for="check1">
    <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" [(ngModel)]="processAnexOne.documentList" >Option 1
  </label>
</div>
<div class="form-check">
  <label class="form-check-label" for="check2">
    <input type="checkbox" class="form-check-input" id="check2" name="option2" value="something" [(ngModel)]="processAnexOne.documentList">Option 2
  </label>
</div>
<div class="form-check">
  <label class="form-check-label">
    <input type="checkbox" class="form-check-input" [(ngModel)]="processAnexOne.documentList">Option 3
  </label>
</div>

score 0 · Accepted Answer · answered Oct 29 '18 at 11:01

0

The three checkboxes are binded to the same model:

[(ngModel)]="processAnexOne.documentList"

answered Oct 29 '18 at 11:01

ibenjelloun

7,425
2
29
53

how can i separate it? – ashwin karki Oct 29 '18 at 11:02
It depends on your model, you should bind the form to your model. For example if the model contaisn check1, check2 and check3 : `[(ngModel)]="processAnexOne.check1"`, `[(ngModel)]="processAnexOne.check2"`, `[(ngModel)]="processAnexOne.check3"` – ibenjelloun Oct 29 '18 at 11:04

score 0 · Answer 2 · answered Oct 29 '18 at 11:04

0

Your implementation is not working because all your checkboxes are bound to the same model which is a string:

[(ngModel)]="processAnexOne.documentList"

This answer provides a solution to your problem

answered Oct 29 '18 at 11:04

Fabio Milheiro

8,100
17
57
96

score 0 · Answer 3 · answered Oct 29 '18 at 11:37

From your question I understand that , one of the value is pushed into processAnexOne.documentList variable

html:

<div class="form-group col-md-12"> 
    <div class="col-md-4 panel panel-default">
       <h3>Document List</h3>
   <div class="form-check">
    <label class="form-check-label" >
      <input type="checkbox" class="form-check-input" (click)="onUserCheck('Option 1')" value="processAnexOne['documentList']" name="documentList" [checked]="'Option 1'== processAnexOne['documentList']" value="something"  >Option 1
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label" >
      <input type="checkbox" class="form-check-input" (click)="onUserCheck('Option 2')"  value="processAnexOne['documentList']" name="documentList" [checked]="'Option 2'== processAnexOne['documentList']" value="something" >Option 2
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" name="documentList" (click)="onUserCheck('Option 3')" value="processAnexOne['documentList']" class="form-check-input"  [checked]="'Option 3'== processAnexOne['documentList']" >Option 3
    </label>
  </div>

ts:

@Component({
  selector: 'app-checkbox',
  templateUrl: './checkbox.component.html',
  styleUrls: ['./checkbox.component.scss']
})
export class CheckboxComponent implements OnInit {

  processAnexOne: ProcessAnexOne;

  constructor() {
    this.processAnexOne = new ProcessAnexOne();
  }

  ngOnInit() {
  }


  public onUserCheck(value){
    this.processAnexOne['documentList'] = value;
  }
}


export class ProcessAnexOne {
  documentList: string;  
}

Hope it helps

All the checkbox is selected in angular 6

3 Answers3