Как реализовать форму со списком чекбоксов как один control в Angular 6?

Question

[WhatIsHTML]

Нужно реализовать форму со списком чекбоксов, которые будут представлены как один control в angular 6.
Компонент выглядит следующим образом. Как видно категория может приходить отмеченной как true или false (в реальности категории приходят с сервера).

import { Component } from '@angular/core';
import { FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  categories = [
    {
      id: 1,
      name: 'tech',
      checked: false
    },
    {
      id: 2,
      name: 'animals',
      checked: true
    },
    {
      id: 3,
      name: 'food',
      checked: false
    }
  ];

  myGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myGroup = this.formBuilder.group({
      myCategory: this.formBuilder.array(this.categories)
    });
  }
}

Хтмл выглядит следующим образом

<form [formGroup]="myGroup">
	<div *ngFor="let category of myGroup.controls['myCategory'].controls; let i = index">
		<input type="checkbox" [formControl]="category" [checked]="categories[i].checked">
    <label>{{ categories[i].name }}</label>
	</div>
  Selected: <strong>{{ myGroup.get('myCategory').value }}</strong>
</form>

Вот пример https://stackblitz.com/edit/angular-1hnnxx

Все ок, но как только стоит кликнуть на чекбокс, как сразу объект в массиве categories становится булевым true/false. Таким образом, мы в компоненте теряем информацию о категории. Почему так происходит?

Answer 1

[Ivan Stroykin]

Как то так? - https://stackblitz.com/edit/angular-2oejmz
Идея взята отсюда