Angular 2 Checkbox value with Reactive form

Question

i have checkbox in angular 2 reactive form i need to pass the values of these checkbox in POST api , Right now they will pass value on status. below are checkbox code it only passed the status like true or false instead of value like 1,2 something like that.

<input type="checkbox" formControlName="servicelatest"  [value]="CatArry[i].id" (change)="serviceCheckBox($event)"/>

-------------------**------------------------

<div *ngFor="let serviceType of laceDetailFrom.controls.serviceType.controls; let i=index" >
<div  [formGroupName]="i">

<input type="checkbox" formControlName="servicelatest"  [value]="CatArry[i].id" (change)="services[$event.target.getAttribute('value')]=$event.target.checked">&nbsp;{{CatArry[i].cat_name}}
                             </div>
                           </div>

Vivek Doshi · Accepted Answer · 2017-04-01 09:54:19Z

1

Template Side :

<input type="checkbox" formControlName="servicelatest"  [value]="CatArry[i].id" 
(change)="services[$event.target.getAttribute('value')]=$event.target.checked"/>

Component Side :

services = {};

And then use services as your selected checkboxes values

edited Apr 1, 2017 at 9:54

answered Apr 1, 2017 at 8:25

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

10 Comments

Sharad Bohra Over a year ago

Thanks for replay but still not getting proper thing. After post i have still get true and false. i have put same code in html which you put and in component i have take a variable which type is any but problem still remain

Sharad Bohra Over a year ago

do i need to put services in reactive form group value?

Vivek Doshi Over a year ago

Will you please share your code , by your code I can expect you have put it in loop

Sharad Bohra Over a year ago

Hi i have share my loop code please have look on this if anything you want let me known

Vivek Doshi Over a year ago

services = {}; try with this.

|

Collectives™ on Stack Overflow

Angular 2 Checkbox value with Reactive form

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related