Have you ever wondered why Angular is so powerful with forms? In this article, I will walk you through this topic to understand why and how Angular is better with forms compared to React or Vuejs.

Contents:

1. What Reactive Form is
2. Three Basic Blocks
3. FormBuilder
4. Validators
5. The Magic

---

What Reactive Form is

Angular provides 2 ways to work with forms which are template-driven form and reactive form.

While template-driven form is dealing with form by using directives, Reactive form allows Angular developers to handle forms at the Angular template component.

Reactive Form will bring more benefits compared to template-driven from such as:

• The code will be testable.
• Keep all form logic in the same place.
• Easy to handle multi-level form (I will highlight this at The Magicsection).
• This approach is friendly with reactive programming.

---

Three Basic Blocks

There are 3 fundamental building blocks of Angular Reactive Form:

1. FormControl
2. FormGroup
3. FormArray

When we build reactive forms in Angular, they all come from these three basic blocks.

In order to use Reactive Form, import [_ReactiveFormsModule_](https://angular.io/api/forms/ReactiveFormsModule) from the_@angular/forms__ package and add it to your NgModule’s _imports_ array._

1. FormControl

Initializing Form Controls

Here is how we create form control in Angular with 4 different syntaxes.

First, we can init form control with value only.

#angular #javascript #reactive-programming #programming #reactive-forms