Two way data binding for FormBuilder group controls & read disabled control values with help of getRawValue() in Form.

Databinding FormBuilder group control Elements

I tried two way binding with [value] property of textbox’s. I can use Valuechanges() as well but I want to know best approach for same control binding in form.

Let’s see with Example:
My form structure like below :

Form Structure

In Employees array we can add any number of Employee’s within same EmployeeORG something like that requirement. within EmployeeORG we can add any number employee’s . EmployeeORG not static . It may vary based on data entry person. By default EmployeeORG is enable in form if you click on New Employee button we need to disable EmployeeORG input & populate 0th(i.e. zero ) index of EmployeeORG value should be populated automatically (i.e. two way binding ) in Employees array.

For that above requirement I tried this.empForm.value we know it will not pick the Disabled control values to overcome this I used this.empForm.getRawValue().

For 2-way binding purpose I used [value] (i.e. property binding ) for input control like below.

[value] Property Binding on Input control

For UI side it’s seems fine but I’m unable to read the EmployeeORG disabled value with help of this.empForm.getRawValue(). It showing output like below

Console Output

If I use patchValue() for every control of property binding like below. Now it’s working what I was expecting.

Property binding with method

Method for property binding

Expected output like below:

Expected Output

For Video :

For Live code :

angular-2-waybinding-formbuilder-disablecontrol - StackBlitz

Note:
Can you please suggest whether I followed correct approach or not. 2-way binding for Formbuilder group controls.

== If you find any thing wrong please let me know I will update my self ==