Angular Reactive Forms And Validations

As we have seen in the last article, there are two types of form development approach that we use in Angular 5. The first one is template-driven and the other one is the reactive forms approach. Let us explore what are reactive forms and how to validate these in Angular 5.

What are reactive forms?

This approach uses the Reactive forms for developing the forms which favor the explicit management of data between the UI and the Model. With this approach, we create the tree of Angular form controls and bind them in the native form controls. As we can create the form controls directly in the component, it makes it a bit easier to push the data between the data models and the UI elements.

Initial imports for using reactive forms

To begin using the reactive forms, we must ensure that we are importing the proper references in the project and at the right location. Before we start, let’s add the new component using this command in the command prompt.

In this, what we have done is that we have imported the ReactiveFormsModule and added that module in the imports array. The next change we need to do is in the component, where we simply add these 3 packages in the import section.

To sum up, we have 2 basic steps -

FormControl

It tracks the value of the controls and validates the individual control in the form.

FormGroup

Tracks the validity and state of the group of FormControl Instance or moreover, we can say the formgroup to be a collection of FormControls.

FormBuilder

This helps us to develop the forms along with their initial value and there validations.

Designing the component code

Now, we know the basics of the formcontrol, formgroup, and formbuilder. Let us design the form in the component snippet. For that, the code can be like below.

In the above code, we have designed our form in the component. As we know, in the reactive forms approach, we design the forms in the template and then do the bindings for the HTML.

What we have done in this code is -

Here, we are declaring the fname to be of type FormControl() and assigning to the fname property which will be our form control name in the HTML. Here, we can specify the initial value of our form controller and add some validators in it (we can see that in the next section).

This is all of the above code. Now, it’s time to tie up these controls in the component to our template, i.e., our HTML. Let’s just check the following snippet.