binding a angular reactive form FormControl to a dynamic value

Question

I have a reactive form instantiated using FormBuilder. I would like to use this form for updating or adding a new employee. I am trying to add an expression to the formBuilder constructor that checks to see whether there is a currently selected employee and if there is use one of that employee's interface fields as the value on the form and if there's no current selected employee have a empty string as the value of the specific FormControl.

what i've tried:

'EMP_NM': [this.selectedEmp ? this.selectedEmp.EMP_NM : '',  Validators.required],

and then in my editEmployee function:

editCashier(employee: IEmployee) {    
    this.selectedEmp = employee;      
    this.empForm.reset();     
    console.log(this.selectedEmp.EMP_NM);
}

When I do this the value shown on the EMP_NM input field in the HTML doesn't get updated. i've tried setting a setTimeout() in my editEmployee function but that didn't work either. Any idea what might be going wrong here?

I initialize the empForm in my conponent's constructor using formBuilder's group function. Would it help if I moved that to a different function and then call that function everytime the editEmployee function is called to re-initialize the form?

Swoox Swoox · Accepted Answer · 2017-12-07T11:14:58

You can update it with patchValue or setValue:

this.empForm['controls']['employee'].patchValue(employee);

Have no clue if it's a nested control but you can go more layers down.

binding a angular reactive form FormControl to a dynamic value

1 Answers