Angular2 - Multiselect & Checkboxes - only the last selected values ​​are displayed

Question

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

It looks great for multiple fields, however it doesn't work as expected for multiselect and checkbox fields.

For multi selector and check boxes, only the last selected values ​​are printed. Instead, I need an array.

Any suggestions on how to do this?

Also for the file attachment field, how can I add a list of files to the source object (created using FormBuilder and ControlGroup) with the 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

Answer 1

<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;
      });

}    

Answer 2

, formarray. formControlName . .