Как создать динамическую c angular форму, используя реактивную форму?

Question

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

  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    department: new FormControl('')
  });

Типы отделов: 'a', 'b', 'c'.

если пользователь выберет 'a', я добавлю новую FormGroup с именем "departmentSettings" в profileForm

aFormGroup =  new FormGroup({
    xWorkTime: new FormControl(''),
    yWorkTime: new FormControl('')
})

profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    department: new FormControl(''),
    departmentSettings: new FormGroup({
        xWorkTime: new FormControl(''),
        yWorkTime: new FormControl('')
    })
});

, если пользователь выберет 'b', я добавлю новый FormGroup в profileForm

bFormGroup =  new FormGroup({
    someProperty: new FormControl(''),
    otherProperty: new FormControl('')
})

profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    department: new FormControl(''),
    departmentSettings:  new FormGroup({
        someProperty: new FormControl(''),
        otherProperty: new FormControl('')
    })
}); 

Другие случаи такие же. Итак, как я могу сделать это, используя простой способ в angular?

Answer 1

В вашем html добавьте атрибут (change) = 'someFunction ()' к входу отдела.

<input matInput type="select" #departmentInput formControlName="department"
                 (change)="doChange($event)">

Эта функция активируется при изменении значения входа, затем Вы можете добавить новый элемент управления формы в вашу реактивную форму.

Реактивные формы имеют метод FormGroup.addControl () для этого. https://angular.io/api/forms/FormGroup