Консоль Мат-Флажок Выбранные значения Реактивные формы Угловая 6

Question

Я использую FormGoup, и я хочу вставить выбранные значения checkbox в массив и хочу утешить его значение, но я делаю некоторую ошибку, я думаю, пожалуйста, проверьте мой код и дайте мне знать, где яНужно внести изменения.

Спасибо

component.ts

import {Component} from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { map } from 'rxjs/operators';

@Component({
  selector: 'checkbox-overview-example',
  templateUrl: 'checkbox-overview-example.html',
  styleUrls: ['checkbox-overview-example.css'],
})
export class CheckboxOverviewExample {
  form;
  controlNames;
  selectedNames$;
  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      'one': false,
      'two': false,
      'three': false,
      'four': false
    })
    this.controlNames = Object.keys(this.form.controls).map(_=>_)
    this.selectedNames$ = this.form.valueChanges.pipe(map(v => Object.keys(v).filter(k => v[k])));
  }
}

component.html

<ng-container [formGroup]="form">
  <mat-checkbox *ngFor="let controlName of controlNames" [formControlName]="controlName">{{controlName}}</mat-checkbox>
</ng-container>

См. на StackBlitz