Реактивная форма массив других реактивных форм

Question

Я пытаюсь создать реактивную форму, и ниже приведен ее прототип.

Мне нужно создать 3 реактивные формы Форма 1, Форма 2, Форма 3 , а затем объединить их в одну реактивную форму, скажем SignUpForm . Это как SignUpForm - это массив из 3 различных реактивных форм. Я погуглил FormBuilder, FormArray и FormGroup, но запутался.

Answer 1

вам следует использовать FormArray. Во-первых, поверх других импортируемых форм вы захотите импортировать FormArray из модуля угловых форм:

app.component.ts

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
signUpForm: FormGroup;
items: FormArray ;

ngOnInit() {
  this.signUpForm = this.formBuilder.group({
    formName: '',
    formDescription: '',
    items: this.formBuilder.array([ this.createItem() ])
  });
   this.addItem()
   this.addItem();
}

createItem(): FormGroup {
  return this.formBuilder.group({
    field1: '',
    field2: ''
  });
}

addItem(): void {
  this.items = this.signUpForm.get('items') as FormArray;
  this.items.push(this.createItem());
}

в html:

<div formArrayName="items"
  *ngFor="let item of signUpForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="field1" placeholder="field1">
    <input formControlName="field2" placeholder="field1">
  </div>
</div>

Теперь это так же просто, как вызвать наш метод addItem в нашем шаблоне, когда пользователь нажимает, чтобы добавить новый элемент или сделать это в нашем компоненте.

Answer 2

Создайте каждую из трех форм - Form1, Form2 и Form3, используя FormBuilder:

form1group = this._formBuilder.group({
// Your formControls go here
})

Затем создайте SignUpForm, содержащую эти три группы форм (form1group, form2group и form3group).

signupForm = this._formBuilder.group({
    form1group,
    form2group,
    form3group
})

FormArray - это массив FormControls, который вы должны использовать при работе с динамическими формами (т. Е. Когда для динамического создания формы необходимо добавлять новые FormControls).