угловые реактивные формы создают флажок матрицы

Question

Я остановился на реализации матрицы с флажками.

есть 4 статических столбца и есть динамические строки с заголовками.

как создать реактивную форму с помощью этой задачи?

динамические строки собираются следующим образом.

 @Input()
  set dealers(deal: Array<IDealer>) {
    deal.map(el =>
      this.roles.push(
        new FormGroup({
          dealerId: new FormControl(el.dealerId),
          roleIds: new FormArray([])
        })
      )
    );

и это работает в одну сторону.Мне нужно проверить флажки с контроллера. (Режим редактирования)

  toggleMe($event) {
    const t = this.userForm.get('roles') as FormArray;

    const roleName = $event.target.id.split('_')[0];
    const dealerId = $event.target.id.split('_')[1];
    const dealerRoleForm = t.value.filter(d => d.dealerId === dealerId)[0];

    if (dealerRoleForm.roleIds.includes(roleName)) {
      dealerRoleForm.roleIds = dealerRoleForm.roleIds.filter(
        v => v !== roleName
      );
    } else {
      dealerRoleForm.roleIds.push(roleName);
    }
  }