Question:

I have this <a href="https://plnkr.co/edit/sT94PRSy1yXSks6RxPhj?p=preview" rel="nofollow">plunker</a>. 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?

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

<strong>datepicker.component.html</strong>

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

<strong><a href="https://plnkr.co/edit/cHis6CGClUvhI7PjDxgO?p=preview" rel="nofollow">Modified Plunker</a></strong>