Out of the box, Angular provides us with two types of forms:
- Template Driven Forms
- Reactive Forms
In Template Driven Forms, you create controls on the component template and bind data using ngModel. With these, you do not create controls, form objects, or write code to work with pushing and pulling of data between component class and template; Angular does all of these tasks for you. In template driven forms, there is very little code for validations in the component class, and they’re asynchronous.
In Reactive Forms, you create form controls as trees of objects in the component class and bind them to the native form controls in the template. All validations and the creation of form controls are written in the component class. In Reactive Forms, all validations and changes in the state of native forms are synchronous, so you can write code in the component class to observe them. You should choose to create reactive forms when the data model is immutable and usually mapped to a database.
The major difference between these two approaches of creating forms? In reactive forms you do not use directives such as ngModel, required, etc. You create all controls and their validations in the component class. Reactive forms are easy to test and maintain, so in this post we will learn to create a basic Reactive Form, using FormControl, FormGroup, FormBuilder class, and adding validations.
Step 1: Add Reactive Forms Module
To start working with reactive forms, first add ReactiveFormsModle in the App Module as shown in the next listing:
Step 2: Import required module in Component
Next, you need to import the required Reactive forms classes such as FormGroup, FormControl, FormArray in the components class. We will use these classes to construct our reactive form. After importing these classes, the component class should look like the listing below:
Your component class can be different from the AppComponent created above depending on your implementation; however, here we have imported FormGroup, FormControl, and FormArray classes. Let’s learn about these classes one by one:
Step 3: Using the FormControl class
The FormControl class corresponds to one individual form control, tracking its value and validity. While creating your reactive form, you will create an object of the FormControl class. The FormControl constructor takes three parameters:
- Initial data value, which can be null.
- Array of synchronous validators. This is an optional parameter.
- Array of asynchronous validators. This is an optional parameter.
In the component class, you can create a FormControl as shown in the listing below:
We are not passing any optional parameters like sync validations or async validations, but we will explore these parameters while adding validation to a FormControl.
On the View, you can use email FormControl as shown below:
As you see, we are using property binding to bind the formControl email to the input element on the view.