Reactive Forms with Angular [Using easy Examples]

Forms in Angular

There are two different approaches to forms in Angular.

The first category are the template-driven forms. Using this method, you first create html-input-elements and then use directives like ngModel to bind their value to a component’s variable.

Personally, I’ve used this technique a lot. But that way only because I did not know about the other category.

Reactive Forms.

Reactive Forms a kind of the opposite to template-driven forms. Instead of defining the form in your template, the structure of the form is defined in code.

This maybe sounds a little bit odd now. At least I felt like this.

“Isn’t it twice the work, to define the form in code?”

“And isn’t it much harder to read?”

That was what I asked myself and that is what you should ask yourself, too!

But please wait with that, until you read this article and fully understand the topic.

To answer these questions, let’s dive right in and just build a small example using reactive forms together!

Importing the Module

For this example we are going to use a blank angular-cli application.

I you haven’t done so already, please go ahead and create one:

 ng new [name]

As you probably know, Angular is organized in modules.

To use certain features, we first need to import the modules that contain that feature, before we can use it.

This is true for reactive forms, as well.

To use reactive forms, we need to import the ReactiveFormsModule into our parent module.

In our case, the parent module is the AppModule.

Let’s import the required module into it:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { ReactiveFormsModule } from '@angular/forms'
 
import { AppComponent } from './app.component'
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Defining a Model

In this example we are going to create a simple contact-form, because I couldn’t think of something more creative.

Before we start creating our form, we first need to define, which information we would like to gather with it.

To do so, we are creating a so called model.

A model is just a class, that contains all the fields, that our data can have.

All we need to do, is to create a new file for that class. Also, I typically create a new folder called models to contain all models of the application.

Inside of that file, we create our model. In this case, the data will be split in two parts.

Personal data about the person using the contact-form and the actual data he/she wants to submit.

The model for that looks like this:

export class ContactRequest {
  personalData: PersonalData
  requestType: any = ''
  text: string = ''
}
 
export class PersonalData {
  email: string = ''
  mobile: string = ''
  country: string = ''
}

As you can see, I have also added default values to each field, as we will require them later.

Setting up a Contact-Component

Next, we need a component, to create our form in.

So let’s just create one!

Just use the following command of the angular-cli:

 ng generate component contact

This will create a basic component for us to use. It will also import that component into our AppModule automatically.

Creating a Reactive Form in Angular

Now we can finally start creating our form.

Other than with template-driven forms, we can not simply use the model we have created earlier.

Instead we have to create a different one. One, that is only responsible for the form-representation.

But why doe we have to do that? Isn’t that much more complex that just binding to the model ?

Of course it is.

But binding to the model directly comes with one large downside.

We are altering the original data directly.

 createFormGroup() {
  return new FormGroup({
    personalData: new FormGroup({
      email: new FormControl(),
      mobile: new FormControl(),
      country: new FormControl()
     }),
    requestType: new FormControl(),
    text: new FormControl()
  });
}
 

countries = ['USA', 'Germany', 'Italy', 'France']
 
requestTypes = ['Claim', 'Feedback', 'Help Request']

 contactForm: FormGroup;
constructor() {
    this.contactForm = this.createFormGroup();
}
 

import { Component, OnInit } from '@angular/core'
import { FormControl, FormGroup } from '@angular/forms'
 
@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css'],
})
export class ContactComponent implements OnInit {
  contactForm: FormGroup
 
  countries = ['USA', 'Germany', 'Italy', 'France']
 
  requestTypes = ['Claim', 'Feedback', 'Help Request']
 
  constructor() {
    this.contactForm = this.createFormGroup()
  }
 
  // Step 1
  createFormGroup() {
    return new FormGroup({
      personalData: new FormGroup({
        email: new FormControl(),
        mobile: new FormControl(),
        country: new FormControl(),
      }),
      requestType: new FormControl(),
      text: new FormControl(),
    })
  }
 
  ngOnInit() {}
}

Implementing the Template

For now that is all we need to do code-wise.

Let’s take a look how the counterpart, the template will look like.

Basically, our HTML does look just like a regular form. The only difference is, that we have to tell angular, which FormGroup and which FormControl to use for each control.

To see the result, I’ve also added a paragraph to print out our form-model as json.

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
  <div formGroupName="personalData" novalidate>
    <input formControlName="email" /> <input formControlName="mobile" />
    <select formControlName="country">
      <option *ngFor="let country of countries" [value]="country">
        {{country}}
      </option>
    </select>
  </div>
  <select formControlName="requestType">
    <option *ngFor="let requestType of requestTypes" [value]="requestType">
      {{requestType}}
    </option>
  </select>
  <input formControlName="text" />
  <button type="submit" [disabled]="contactForm.pristine">Save</button>
  <button type="reset" (click)="revert()" [disabled]="contactForm.pristine">
    Revert
  </button>
</form>

At this point, your app should be in a runable state again.

In case you didn’t know: You can start your application using the

 ng serve

command.

Using the Angular Form-Builder

From the example of our TypeScript code above, we can say that the code is starting to look cluttered already.

To solve that, angular provides a service called FormBuilder. This FormBuilder allows us to build our form-model with less code.

To use the FormBuilder, we need to request it via dependency injection. We do so in the constructor of our component.

 constructor(private formBuilder: FormBuilder) {
    this.contactForm = this.createFormGroup();
}
 

The FormBuilder class has to be imported from @angular/forms:

import { FormControl, FormGroup, FormBuilder } from '@angular/forms'

Now we can use that FromBuilder to build our form-model. For demonstration-purposes, I have created a new method called “createFormGroupWithBuilder”. You can just replace you previous code if you want to.

   createFormGroupWithBuilder(formBuilder: FormBuilder) {
    return formBuilder.group({
      personalData: formBuilder.group({
        email: 'defaul@email.com',
        mobile: '',
        country: ''
      }),
      requestType: '',
      text: ''
    });
  }
 

Using this approach, we have to define the default values of each field. You can just pass them an empty string, or fill it with some default-data as I did with the “email”-field.

 createFormGroupWithBuilderAndModel(formBuilder: FormBuilder) {
    return formBuilder.group({
      personalData: formBuilder.group(new PersonalData()),
      requestType: '',
      text: ''
    });
  }
 

Extracting the Data from the Form

Now that have talked about our more than enough, it’s time to worry about getting our data out of that form into an contact-request object.

For that, we are using the submit-button, we have created earlier in our template. We also already registered the callback-method “onSubmit”.

To be able to listen to the button-press, we need to implement that callback in our component.

Inside of that callback, we can access the form’s values by its values property.

 this.contactForm.value

But we need to be careful here. These values are still referenced by our form. If we just copy that reference and modify the data elsewhere, the form will be impacted, as well. This can cause weird side-effects.

This is why we need to create a copy of the data. In this example we are using Object.assign for that.

 const result: ContactRequest = Object.assign({}, this.contactForm.value);

However, that is not enough. Object.assign creates something called a shallow copy. That means that all primary-fields of the object are copied properly, but the references to sub-objects or lists are still the same. Not noticing this problem does cause even more weird side-effects.

Instead what we want to do is create a deep copy. We can either achieve that by doing it copying everything manually or use a utility like lodash’s cloneDeep function. We will use the manual method here.

 result.personalData = Object.assign({}, result.personalData);

Overall, the onSubmit method should now look something like this:

   onSubmit() {
    // Make sure to create a deep copy of the form-model
    const result: ContactRequest = Object.assign({}, this.contactForm.value);
    result.personalData = Object.assign({}, result.personalData);
 
    // Do useful stuff with the gathered data
    console.log(result);
  }
 

Resetting the Form

Resetting the form is definitely one of the easier parts with reactive forms.

Again, we are going to use the reset-button, we have included into our template already.

All we need to do now, is to implement the revert-callback into our component.

To reset the form, we can either use the form’s reset method without any parameter,

 // Resets to blank object
this.contactForm.reset();

which results in an empty object, or pass a set of default parameters along:

 // Resets to provided model
this.contactForm.reset({ personalData: new PersonalData(), requestType: '', text: '' });

All in all the revert method simply looks like this:

   revert() {
    // Resets to blank object
    this.contactForm.reset();
 
    // Resets to provided model
    this.contactForm.reset({ personalData: new PersonalData(), requestType: '', text: '' });
  }
 

Conclusion

In this tutorial we learned how to create forms with angular using the reactive-forms method.

I hope you enjoyed this post.

If you did please hit the share button below and help other people understand reactive-forms in angular, as well.

Have a fantastic day!