The way the framework handles the data flow is required to understand before creating an Angular form. Reactive and template-driven follow different structures to handle the input of the user, both being a different type of Angular form.
Data flow in Reactive forms:
Each form element in the view in a Reactive form is directly linked to a form model (FormControl instance). There is a synchronous updation both from the view to the model and the model to the view. Thus, it is not dependent on the UI. The steps through which the data flow when the value of the input field is changed from the view and then from the model in reactive forms is discussed below.
Data flow from View to Model in reactive forms:
Step 1: A value is typed by the user into the input element.
Step 2: An “input” event is emitted by the form input element with the latest typed value.
Step 3: The control value accessor listen for events on the form input element. It thus immediately relays the new value to the FormControl instance.
Step 4: The new value through the valueChange observable is emitted by the FormControl instance, after receiving the value.
Step 5: The new value is received by any subscribers to the valueChanges observable.
Data flow from Model to View in reactive forms:
Step 1: The user calls the method to update the FormControl value.
Step 2: The new value is emitted by the FormControl instance through the valueChanges observable.
Step 3: The new value is received by the subscribers to the valueChanges observable.
Step 4: The element with the new value is updated by the control value accessor on the form input element.
Data flow in Template-driven forms:
To manage the form model internally in the template-driven forms, every form element is linked to a directive. The steps through which the data flow when the value of the input field is changed from the view and then from the model in template-driven forms is discussed below.
Data flow from View to Model in Template-driven forms:
Step 1: A value is typed by the user into the input element.
Step 2: An “input” event having the new value is emitted by the input element.
Step 3: The setValue() method on the FormControl instance is triggered by the control value accessor attached to the input.
Step 4: The new value is emitted by the FormControl instance through the valueChanges observable, after the setValue() method.
Step 5: The new value is received by the subscribers to the valueChanges observable.
Step 6: The NgModel.viewToModelUpdate() method is also called by the control value accessor. It emits an ngModelChange event.
Step 7: For the defined property, the component template uses two-way data binding. The value emitted by the ngModelChange event is used to update the defined property in the component.
Data flow from Model to View in Template-driven forms:
Step 1: The defined property is updated to a new value in the component.
Step 2: The Change detection then starts.
Step 3: The ngOnChanges lifecycle hook is called on the NgModel directive instance during the change detection. The reason being that the value of one of its inputs has changed.
Step 4: An async task is queued by the ngOnChanges() method to set the value for the internal FormControl instance.
Step 5: The Change detection is now completed.
Step 6: To set the FormControl instance value, the required task is executed.
Step 7: The latest value is emitted by the FormControl instance through the valueChanges observable.
Step 8: The new value is received by any subscriber to the valueChanges observable.
Step 9: The form input element in the view is updated by the control value accessor with the most advanced value of the property.