Динамическое добавление полей формы в реактивные формы в Angular 8

У меня возникли проблемы с заполнением полей формы из массива. Я изначально думал о том, чтобы ввести массив из отдельных компонентов в один компонент, который будет обрабатывать форму. Вместо того, чтобы делать несколько форм. Но я не могу заставить его работать. Любая помощь будет оценена по достоинству! Я прошел через Google / stack / medium и, похоже, ничего не нашел. Я сделал пример на plunkr.

https://stackblitz.com/edit/angular-t7hcq6

В файле ts:

  public demoForm: FormGroup;
  public arrayItems: data = [];

  private formFields = ["Sku", "Title"];

  constructor(private _formBuilder: FormBuilder) {
    this.demoForm = this._formBuilder.group({
      demoArray: this._formBuilder.array([])
    });
  }

  ngOnInit() {
    this.formFields.map(field => {
      this.arrayItems.push({ title: field });
      this.demoArray.push(this._formBuilder.control(''));
    });
  }

  get demoArray() {
    return this.demoForm.get("demoArray") as FormArray;
  }

В шаблоне:

<form [formGroup]="demoForm">
   <div formArrayName="demoArray" 
      *ngFor="let arrayItem of arrayItems; let i=index">
      <input type="checkbox"[formControl]="demoArray[i]">
      <label>{{arrayItem.title}}</label>
   </div>
</form>

Спасибо вам, ребята.


person Lewis Morgans    schedule 17.10.2019    source источник
comment
Как правило, рекомендуется указать здесь код для вашего вопроса, чтобы помочь нам ответить. Вы используете FormArray?   -  person Will Alexander    schedule 17.10.2019
comment
Извините, @WillAlexander. Я впервые участвую в работе со стеком, о чем не подозревал. Проблема теперь решена, однако, ниже. Спасибо, что нашли время.   -  person Lewis Morgans    schedule 17.10.2019


Ответы (1)


измените свой шаблон так:

<form [formGroup]="demoForm">
   <div formArrayName="demoArray" 
      *ngFor="let arrayItem of arrayItems; let i=index">
      <input type="checkbox" [formControlName]="i"> <!-- this line -->
      <label>{{arrayItem.title}}</label>
   </div>
</form>
person Henrique Erzinger    schedule 17.10.2019
comment
Большое вам спасибо за вашу помощь в этом. Я ценю вашу поддержку! - person Lewis Morgans; 17.10.2019
comment
Как добавить новый флажок на этом примере? - person Rafael Guimarães; 18.11.2019
comment
@ RafaelGuimarães this.demoArray.push(this._formBuilder.control(/* your new control stuff */)); - person Henrique Erzinger; 19.11.2019