Angular2 - Multiselect & Checkboxes - Only latest selected values is getting submitted

Question

I have a simple form with different types of fields. On submitting the form, I just print the values submitted.

It looks fine for a few fields, however it doesn't work as expected for multiselect and checkbox fields.

For multiselect and checkboxes only latest selected values is printed. Instead, I want an array.

Any suggestions on how to do this?

Also for the file attachment field, how can I add the filelist to the original object (Created using FormBuilder & ControlGroup) with rest of the field values?

this.SampleForm = formBuilder.group({
        title: ['', Validators.required],
        description: ['', Validators.required],
        countries: ['', Validators.required],
        attachment: ['', Validators.required],
        continents: ['', Validators.required]
    });

Plunker Link

Its already there. http://plnkr.co/edit/Uuf0GLGIckiQ2SV06fNS?p=preview — Saravanan, Feb 11 '16 at 13:06
Hey @Saravanan check out this answer, I implemented it here. http://stackoverflow.com/questions/35167463/angular2-how-bind-to-select-multiple/35169357#35169357 — inoabrian, Feb 11 '16 at 14:34
Thanks @inoabrian . It helped. It seems there is no straight forward way to do this. — Saravanan, Feb 15 '16 at 13:28
For two-way databinding with a multi-select list, see http://stackoverflow.com/a/36089272/215945. Note however, that solution does not use formBuilder (if that matters). — Mark Rajcok, Mar 18 '16 at 16:26

score 0 · Answer 1 · answered Nov 03 '17 at 09:25

<input type="checkbox" id="SelectAll" name="SelectAll" value="SelectAll" (click)="toggleSelect($event)"  />
<input type="checkbox" name="data[{{i}}]" [checked]="data.selected" value="data.selected" id="{{data.name}}" (change)="data.selected =!(data.selected)" /> 
 toggleSelect = function(event){     
        this.SelectAll = event.target.checked;
        this.data.forEach(function(item){

         console.log(item);

         item.selected = event.target.checked;
      });

}

score 0 · Answer 2 · answered Mar 30 '18 at 18:22

0

if you want to get array of selected values, you can make your continents form control as an formarray. and put formControlName and select list. so that values selected can be passed as an array.

answered Mar 30 '18 at 18:22

Dharanesh Babu

1
1

Angular2 - Multiselect & Checkboxes - Only latest selected values is getting submitted

2 Answers2