Angular 2 – Reactive forms

Hi Friends,

Hope you are all well. In this post we are going to discuss about reactive forms. Wait., what about the forms that we are already using with the FormsModule. Those are the typical template-driven forms where you use ngModel and ngModelGroup to manipulate form fields. Reactive forms is slightly different from the template-driven forms. Let’s see a basic example of the same.

A screencast of this post.

 

Code for this post can be found here.

First of all I have created a angular 2 application using the angular-cli.

Now open up app.module.ts and change the forms module to reactive forms module as shown below.

Next let’s go ahead and create the form first. Open up index.html and add the below code.

What we have done here is very simple. We have just created a form with two fields namely name and mobileno. Let’s talk about form group and form control later.

Now create a new file called contacts.interface.ts and add the below code in it.

Now open up app.component.ts and add the below code.

Things to notice.

We are using FormControl & FormGroup components from @angular forms.

FormControl corresponds to the fields in the form (2 of them). A set of Form Controls can be under a FormGroup. A form Group can also have another form group under it with a few more set of form controls.

Now if you run this app and click on the submit button, the value entered in the fields will be printed on the console.

Also notice that, in these two lines

I have just put up a couple of blank quotes. If you fill some value here, it will be pre-populated on the form when it loads.

Now, let’s move on. Let’s add form validators.

First let’s import validators.

We’ll go ahead and add a required validator.

(If you want to add more than one Validator kindly use an array like [Valiator1, Validator2])

Now open up your app.component.html and add the below code.

I have just added two divs that will appear only when an error is present and also disabled the submit button when there are errors.

Now if you run the code and try to navigate without filling up the fields the required validator will kick in.

Let’s look at FormBuilder now. FormBuilder is essentially used to reduce the amount of code which we use to create forms. First let us import FormBuilder.

Then change the code as shown below.

You would notice that we got rid of FormControls and instead of using FormGroup we are simply using formbuilder.group

Now as you can see this makes the coding for forms much easier and simple.

Reactive forms can be highly useful when dealing with apps that have a lot of forms. For example a poll-based app. This is just a very very basic example. There are a lot of cool stuff in the ReactiveForms Module. This is just to get you guys started.

Thanks to Todd Motto. This post was heavily inspired by his post on Reactive Forms. Apart from Reactive Forms his site (www.toddomotto.com) is a great place to learn about Angular (Both versions) and various concepts/features in Angular.

Hope this helped you guys. Kindly share it with someone and help them too.

Thanks for reading. Peace.

  • Rathiskumar Venkatachalam

    hi raja, i have one query. how to initialize the data to reactive form, from api data for edit purpose.

    • If you look at these lines
      name: [”, Validators.required],
      contactno: [”, Validators.required]

      The first argument in the array is blank quotes right? You have to give the data there to be initialized or pre-populated. For eg.

      name:[‘Raja’, Validators.required]

      This line will initialize the name field with the value Raja.

      (Please watch the video once. I have shown an example for this). Thanks for reading bro. Have a nice day.

      • Rathis

        hi raja, thanks for immediate reply.i am new for angular 2. yes , i think this is static one… i search for edit data comes from API response then what to do..

        • Just put in the variable name in which you receive the data
          eg.,
          name: [, Validators.required]
          or if you data is json
          name: [., validators.required]

          • Rathis

            ok, thanks bro… i try this…

  • Uttam Dawadi

    sir will you provide me clear example on set or patch value to reactiveformcontrol from backend or http request which provide me json data.