How to add dynamically FormControl to FormGroup

Question

I have this plunker. I am creating form components dynamically, based on model (defined in app.ts), and cannot add

formControlName = "name"

to the component. In the control-factory.directive.ts I add

this.form.addControl(this.model.name, new FormControl());,

but how can I bind the value?

that could also help: https://stackoverflow.com/questions/55334283/reactive-forms-how-to-add-new-formgroup-or-formarray-into-an-existing-formgroup — , Mar 25 '19 at 12:00

score 15 · Accepted Answer · answered May 01 '17 at 11:16

To keep form value in sync with your custom model i would subscribe to control.valueChanges

let control = new FormControl(this.model.data);
control.valueChanges.subscribe(x => {
  this.model.data = x;
});
this.form.addControl(this.model.name, control);

to keep in sync form model and view i would bind FormControl to reactive directive i.e. formControl

datepicker.component.html

<input [formControl]="form.get(model.name)">

Modified Plunker

How to add dynamically FormControl to FormGroup

1 Answers1

Linked