Checkbox not working in angular 4

Question

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 ,

Pardeep Jain · Accepted Answer · 2018-06-05 10:17:28Z

1

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

answered Jun 5, 2018 at 10:17

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SmartestVEGA Over a year ago

its working, but how i get comma seperated json object while posting the form?

Pardeep Jain Over a year ago

You can customize your object in the (chnage) method

SmartestVEGA Over a year ago

The cupdatechkbxarray will create array collection of selected values but without formControlName = "selectedDays" how i get the selected dropdown values? I want it like selectedDays: {'Mon',"Wed"}

Sankar · Accepted Answer · 2018-06-05 10:17:35Z

0

Since you have used the input element, can you include "FormsModule" from '@angular/forms' in the root module of your app and try.

answered Jun 5, 2018 at 10:17

Sankar

593 silver badges10 bronze badges

Comments

Atul · Accepted Answer · 2018-06-05 10:27:34Z

Try the below code for showing multi checkbox and how to get multi selection in component

//HTML

<tr *ngFor="let address of addressList">
    <td>
        <input type="checkbox" value="{{address.id}}" name="{{address.email}}" (change) ="updateSelectedTimeslots($event)" />
    </td>
</tr>

//Conponent

countries: any[] = [];
updateSelectedTimeslots(event) {
    let this.countries: any[] = [];
    if (event.target.checked) {
        if (this.countries.indexOf((event.target.name)) < 0) { 
                this.countries.push(({'email':event.target.name}));
        }
    } else {
         for(let i = 0; i < this.countries.length; i++) {
            let country = this.countries[i];
            if(country.email.toLowerCase().indexOf(event.target.name.toLowerCase()) == 0) {
                this.countries.splice(this.countries.indexOf(({'email':event.target.name})), 1);              
            } 
        }
    }
}

Collectives™ on Stack Overflow

Checkbox not working in angular 4

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related