Forms in Angular
Tags: angular, webdev, beginners, programming
Published: 2022-02-05 14:38:53

_> Angular provides to different approaches to handling user input through forms: reactive forms & template-driven forms._

Reactive forms and template driven forms each of them has different advantages when mange form data.

- **Reactive forms ⇒** Provide direct, explicit access to underlying forms object model, they’re more scalable, reusable, and testable. If you work in large project and the form are a key part of your application, **use reactive forms**.

- **Template-driven forms ⇒** depend on directive in the template to create and manipulate the underlying object model. If you have very basic form requirements and logic, template-driven form could be a good fit.

This table show the key difference between reactive and template-driven forms.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnirqw5i1kk94sldikob.PNG)

---

## **Scalability:**
If the forms is essential part of your project, scalability is very important.

- **Reactive forms ⇒** It’s are more scalable than template-driven forms. They provide direct access to the underlying from API, and use synchronous data flow between the view and data model, which makes creating large-scale forms easier.

- **Template-driven forms ⇒** It’s are less scalable than reactive forms. They abstract away the underlying from API, and use async data flow between the view and the data model.

---

## **Setup and data flow in reactive forms:**
In reactive forms, you define the form model directly in the component class. The formControl directive links the explicitly created formControl instance to a specific form element in the view.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwnut4nb0v7jhrdc8lac.png)

**> In this figure, you will see the formcontrol directive links directly to form element in the view.**

**> Data Flow:**
In reactive forms the updates from the view to the model and from the model to the view are synchronous and do not depend on how the UI is rendered.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcufk6j6bbcjbwnoe875.png)

**> Data flow form the view to the model**

In this figure show how data flow changed from the view to model through the following steps:

1. A value is typed by the user into the input element. In this example the value is `blue.`
2. The form input element emits an “input” event with the latest value.
3. The control value accessor listening for events on the form input element immediately relays the new value to the `formControl` instance.
4. The `formControl` instance emits the new value through the **`valueChanges`** observable.
5. The new value is received by any subscribers to the **`valueChanges`** observable.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f98q5s9hrsz98i9wq818.png)

**> Data flow form the model to the view**

In this figure show how data flow changed from the model to view through the following steps:

1. The user calls the `favoriteColorControl.setValue()` method, which updates the `FormControl` value.
2. The `FormControl` instance emits the new value through the `valueChanges` observable.
3. Any subscribers to the `valueChanges` observable receive the new value.
4. The control value accessor on the form input element updates the element with the new value.

## **Setup and data flow in template-driven forms:**
In template-driven forms, the form model is implicit. The directive NgModel creates and manages a FormControl instance for a given form element.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etua2cpeta2trem2bze7.png)

**> In a template-driven form the source of truth is the template. You do not have direct programmatic access to the FormControl instance.**

## **Data Flow:**
In template-driven forms, each form element is linked to a directive that manages the form model internally.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/puy9s9heypow16oyx8zh.png)

**> Data Flow from View to Model**

In this figure show how data flow changed from the view to model through the following steps:

1. A value(Blue) is typed by the user into the input element.
2. An “input” event having the new value is emitted by the input element.
3. The `setValue()` method on the `FormControl` instance is triggered by the control value accessor attached to the input.
4. The `FormControl` instance emits the new value through the `valueChanges` observable.
5. Any subscribers to the `valueChanges` observable receive the new value.
6. The `NgModel.viewToModelUpdate()` method is also called by the control value accessor. It emits an `ngModelChange` event.
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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz0p8u4zjyk67sbt0d2c.png)

**> Data Flow from Model to View**

In this figure show how data flow changed from the model to view through the following steps:

1. The defined property is updated to a new value in the component.
2. The Change detection then starts.
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.
4. An async task is queued by the `ngOnChanges()` method to set the value for the internal `FormControl` instance.
5. The Change detection is now completed.
6. To set the `FormControl` instance value, the required task is executed.
7. The latest value is emitted by the `FormControl` instance through the `valueChanges` observable.
8. Any subscribers to the `valueChanges` observable receive the new value.
9. The control value accessor updates the form input element in the view with the latest value.