Search code examples
jqueryangularangular4-forms

Checkbox not working in angular 4


I could add a dropdown using angular

@Component({
  selector: 'app-child-component',
  template: `
    <select id="select" formControlName = "day"  >                                                
    <option *ngFor = "let g of dayList" [value] = "g"> {{g}} 
    </option>
    </select>                                                                                             
  `,
})

https://plnkr.co/edit/M88wFl?p=preview

But I am unable to add multiple check-boxes

Code below:

@Component({
  selector: 'app-child-component',
  template: `
    Select days in a week :
    <td class="even" *ngFor="let item of dayList;let i = index">                                                       
    <input [(ngModel)]="item.check"  type="checkbox" checked="item.check" formControlName = "selectedDays" (change)="updateChkbxArray(n.id, $event.checked, 'selectedDays')" value="n.id" >  {{item}}                                                                                                       
  `,
})

https://plnkr.co/edit/gyAj6W?p=preview

Could you help me in showing the checkbox collection ,


Solution

  • No need to bind with ngModel and formControlName, Take a look here

    <input class="input" type="search" #agmSearch>
    <p class="even" *ngFor="let item of dayList;let i = index">
    <input  type="checkbox" checked="item.check" (change)="updateChkbxArray(item, $event.checked, 'selectedDays')" value="n.id" >  {{item}}
    </p>
    

    Working Example