Угловая форма управления массивом флажков

Question

У меня есть массив объектов, которые я хотел бы использовать в качестве элемента управления формы в виде списка флажков.Если флажок установлен, он добавляет значение флажка в элемент управления формы (который является списком и начинается пустым).Это то, что у меня есть:

userAddForm = new FormGroup({
  firstName: new FormControl('', [Validators.required,
  Validators.minLength(4)]),
  lastName: new FormControl('', [Validators.required,
  Validators.minLength(4)]),
  email: new FormControl('', [Validators.required,
  Validators.email]),
  username: new FormControl('', [Validators.required,
  Validators.minLength(4)]),
  password: new FormControl('', [Validators.required,
  Validators.minLength(5)]),
});

Когда компонент инициализирован, я создаю экземпляр массива и собираю его из источника данных, а затем думаю, что должен сделать это:

this.userAddForm.addControl(this.locations);

Но что тогда я буду делать в своем шаблоне, чтобы эта работа работала?

Answer 1

можете ли вы предоставить stackblitiz из своего кода ??

вы можете попробовать связать свой флажок formcontrol как:

bindCheckBoxGroup(array) {
    const group = [];
    const group1 = [];
    array.map((l) => {
      group1.push(new FormGroup({
        key: new FormControl(l.name),
        value: new FormControl(l.name.toLowerCase()),
        status: new FormControl(l.value),
      }));
    });
    const formControlArray = new FormArray(group1);
    group.push(new FormGroup({
      options: formControlArray,
      selectedOptions: new FormControl(UserService.mapItems(formControlArray.value)),
    }));
    formControlArray.valueChanges.subscribe((v) => {
      group[0].controls.selectedOptions.setValue(this.mapItems(v));
    });
    return group[0];
  }

mapItems(items) {
    const selectedItems = items.filter((l) => l.status).map((l) => l.key);
    return selectedItems.length ? selectedItems : null;
  }