Data flow forms in Angular 8

When we are building forms in Angular, it is essential to understand how the framework handles data flowing from the user or programmatic changes. Reactive and template-driven forms follow two different strategies when handling form input.

Data Flow in Reactive Forms

In Reactive form, each form of elements in the view is linked to a form model (form Control instance). Updates from the view to the model and from the model to the view and synchronous. And aren't dependent on the UI rendering. The diagram below uses the same favorite color example to demonstrate how data flows work when an input fields value is changed from the view and then from the model.

The steps of the data flow from view to model:

1. The user types a value in the input element; in the case, the favorite color is Blue.

2. The form input element releases an "input" event with the latest value.

3. The control value accessor attends for functions on the form input element immediately relay the new value to the FormControl instance.

4. The form control instance releases the original amount through the value changes observables.

5. Any subscriber to the valueChanges observable receives the new value.

The steps of the data flow from model to view:

1. The user calls the favoritecolorcontrol.setvalue method. Which update the form control value.
2. Then the form control instance recovers the new value through the value changes observables.
3. Then subscribers to the valueChanges observables receive the new value.
4. At least, the control value accessor on the form input element update the elements in the new value.

Data Flow in Template-Driven Form

In template-driven form, each form element is linked to a directive that manages the form model internally. The diagram below uses the same favorite color example to demonstrate how data flows when any input field's value is changed into the view and from the model.

Data flow from View to model

The steps in the data flow from view to model in reactive forms:

Here, the users have to change the input value from red to blue.

• Firstly, the user types Blue in the input element.
• Then, the input element produces an "input" event possess the value Blue.
• Then, the control value accessor connect to the input triggers in the setValue() method on the FormControl instance.
• The FormControl instance emits the new value by the value changes observable.
• Any subscribers to the valueChanges observable obtain the new value.
• The control value accessor also announce the Ngmodel.viewToModelUpdate() method which emits an ngModelChange event.
• The component template uses two-way data binding for the favoritecolor property, the favoriteColor property in the component is updated in the value emitted by the ngModel! Change event (Blue).

Data flow from Model to View

The steps in the data flow from model to view in reactive forms:

The data flow from model to see contained the following steps when the favoriteColor elements change from red to blue.

• Previously, the favoriteColor is updated to a new value in the component.
• Change detection creates.
• During change detection, the ngOnChanges lifecycle hook has been called in the NgModel directive instance because the value of its inputs has changed.
• The ngOnChanges( ) methods queue an async task to set the value to the internal FormControl instance.
• Change detection is executed now.
• Then, the task to fix the FormControl instance value is implemented.
• The Fromcontrol instance emits the latest valueChanges observable.
• Any subscribers to the valueChanges observable accept the new value.
• The control value accessor updates from the input element in the view with the latest favoriteColor value.