FormArray in Angular - basics understanding

Question

My requirement is just this. As per code below, mainarray contain json array with each object having id and name. On click of multiple checkboxes and submit, i just need to log the selected ids. I am unable to figure out exactly , so please favour. What i tried is like below:

In html:

  <form [formGroup]="profileDetails" (ngSubmit)="onsubmit(profileDetails.value)">
    <div class="cov1" formArrayName="coverageIDs" *ngFor="let member of  mainarray;let i=index>
    <input type="checkbox" name"member" [formControlName]="i" [value]="member.id">{{member.name}}
    </div>
    </form>

In ts:

profileDetails=new FormGroup({
            coverageIDs:new FormArray([new FormControl('')])
   })

I surfed enough and i wasn't convinced with any . Even the above gives only one result true even when multiple checkboxes are selected due to model. Please correct me on these.

Look at your TypeScript code. How many FormControl does your FormArray contain? Just one. But you want many of them: one per element of mainarray. So, do just that. Make sure the FormArray has one control per element of mainarray. — JB Nizet
– JB Nizet, Commented Mar 9, 2019 at 11:56
yea you're right. only one form control here. that's why i get only one. I just kept this as base since this is only approach where i didn't get "couldn't find path"errors. Many actually required to be grouped inside coverageIDs . — Gayathri
– Gayathri, Commented Mar 9, 2019 at 11:59
Actually each need need to be pushed into form array as form control — Gayathri
– Gayathri, Commented Mar 9, 2019 at 12:00
I think you are mixing the "presentation" and the "form". take a look at stackoverflow.com/questions/54984196/…. — Eliseo
– Eliseo, Commented Mar 9, 2019 at 14:41

NhutLe · Accepted Answer · 2019-03-09 12:09:14Z

0

you can use muti-selected in angular material. angular_material_example

edited Mar 9, 2019 at 12:09

answered Mar 9, 2019 at 12:07

NhutLe

959 bronze badges

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

1 Comment

Gayathri Over a year ago

am sorry. i just kept the example simple. It's an already existing codebase and has so much details inside and i stick to reactive form.

Collectives™ on Stack Overflow

FormArray in Angular - basics understanding

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related