Добавить элемент управления формы при создании массива

Question

Я создаю форму примерно так:

actions = [
        { id: 'walkTo', name: 'Walk To' },
        { id: 'use', name: 'Use' },
        { id: 'give', name: 'Give' },
        { id: 'pickUp', name: 'Pick Up' }
    ];

this.myForm = this.fBuilder.group({
            name: [null, [Validators.required]],
            age: [null, [Validators.required]],
            actions: this.buildActions(this.actions)
        });

Но как я могу добавить элемент управления без ключа в formarray, который создается методом buildActions. Причина, по которой я делаю это таким образом, заключается в том, что в массиве будет список флажков

buildActions(arr)
    {
        var resultArr = [];
        arr.forEach((x, index) => {
            resultArr.push(this.fBuilder.group({
                this.fBuilder.addControl(false)
            }))
        });
        return this.fBuilder.array(resultArr);
    }

Это ошибки в части this.fBuilder.addControl(false).

Answer 1

Это ошибка, потому что FormBuilder.addControl() не является функцией.

Чтобы создать простой массив форм, передайте массив элементов управления формы следующим образом:

buildActions(arr): FormArray {
  const controls = arr.map(x => this.fBuilder.control(x));
  return this.fBuilder.array(controls);
}

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

buildActions(arr): FormArray {
  const groups = arr.map(x => this.fBuilder.group({
    text: this.fBuilder.control(x.text),
    checked: this.fBuilder.control(x.checked)
  }));
  return this.fBuilder.array(groups);
}

DEMO: https://stackblitz.com/edit/angular-tpcpzc