Angular Forms - (Model Driven Forms/Reactive Forms )

In this article, we are going to talk about Angular Model-Driven forms/Reactive forms. I have already discussed template driven forms in my previous article:

• Angular Forms (Template Driven Forms)

In this article, we will learn how to use model-driven forms. As the name suggests, in a model-driven approach, the model which is created in the .ts file is responsible for handling all the user interactions/validations. For this, first, we need to create the Model using Angular’s inbuilt classes like formGroup and formControl and then, we need to bind that model to the HTML form.

For simplicity, I am using the same code which I have used in Template-Driven approach.

To use the Model-Driven approach, we need to import ReactiveFormsModule in our app.module.ts file.

app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

export class AppModule {
}

Now, let’s open app.component.ts file and paste the below code.

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

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
})

export class AppComponent {
    //userForm => model which is responsible for handling the user interactions
    userForm = new FormGroup({
        firstName: new FormControl(),
        email: new FormControl(),
        address: new FormGroup({
            country: new FormControl(),
            city: new FormControl(),
            postalCode: new FormControl()
        })
    });

    submitForm() {
        console.log(this.userForm.value);
    }
}

To create a model, we need to use two important classes, i.e., FormGroup and FormControl.

I have created the userForm Model using the FormGroup class and added different controls like firstName, email, etc. using FormControl Class.

Let's open app.component.html and paste the following code to render the simple form.

HTML code

<form class="form-horizontal" [formGroup]="userForm" (ngSubmit)="submitForm()" novalidate>

          <div class="form-group">
              <label class="control-label col-sm-2" for="name">First Name:</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" required placeholder="Enter first name" formControlName="firstName">
              </div>
          </div>

          <div class="form-group">
              <label class="control-label col-sm-2" for="email">Email:</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" placeholder="Enter email" formControlName="email">
              </div>
          </div>
          <div formGroupName="address">
              <div class="form-group">
                  <label class="control-label col-sm-2" for="country">Country:</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" placeholder="Enter country" formControlName="country">
                  </div>
              </div>

              <div class="form-group">
                  <label class="control-label col-sm-2" for="city">City:</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" placeholder="Enter city" formControlName="city">
                  </div>
              </div>

              <div class="form-group">
                  <label class="control-label col-sm-2" for="postalCode">Postal Code:</label>
                  <div class="col-sm-10">
                      <input type="text" class="form-control" placeholder="Enter postal code" formControlName="postalCode">

                  </div>
              </div>
          </div>
          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary">Submit</button>
              </div>
          </div>
      </form>

HTML output screenshot

In the HTML code, as you can see, I have used form tag at the top to declare the form.

<form class="form-horizontal" [formGroup]="userForm" (ngSubmit)="submitForm()" novalidate>

I have bound the model userForm (which is present in .ts file ) to the HTML form using the [formGroup] directive.

Whenever a user clicks on the submit button of this form, the ngSubmit event gets fired. The submitForm() function is present in .ts file.

And in the same way, we need to bind each and every form control with model properties using the formControlName inbuilt directive (see below code).

< input type="text" class="form-control" required placeholder="Enter first name" formControlName="firstName">

Now, refresh the browser and fill all the details.


Click "Submit" and check the console log as shown below.

Once we click the "Submit" button, it calls that submitForm function and console log as above.

In our next article, we will learn how to validate the data using Model-Driven forms.

You can download the complete code from my GitHub repository via this link.