In previous post, I introduced you to the Template Driven Approach when working with forms in Angular. The advantage of using the Template Driven Approach is that it is easy to use and suitable for simple scenarios. However, for more flexible and complex cases, you may want to implement the Reactive Forms Approach to have more control over the form through your component.

For the this example project, you can see the demo at: https://next.plnkr.co/plunk/x47O6Cc4vJUnUEo8

First and foremost, we need an Angular project. You can implement this by creating a new project or using your existing Angular project.

// Create a new project through angular cli

sudo npm install -g @angular/cli@latest

ng new Project_Name

Import ReactiveFormsModule

After that, you need to import ReactiveFormsModule to your app.module.ts

import { FormsModule } from '@angular/forms';

... @NgModule({

declarations: [...],

imports: [

...

ReactiveFormsModule

],

})

2. Add your form

Then you should have a form in your template:

<form>

First name:

<input

type="text"

name="firstName"><br> Last name:

<input

type="text"

name="lastName"><br> Age:

<input

type="number"

name="age"><br> <input type="submit" value="Submit">

</form>

This is just a simple form that collects your first name, last name and age.

You can style it however you want, or you can use this temporary CSS

input[type=text], input[type=number], select {

width: 100%;

padding: 12px 20px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

} input[type=submit] {

width: 100%;

background-color: #4CAF50;

color: white;

padding: 14px 20px;

margin: 8px 0;

border: none;

border-radius: 4px;

cursor: pointer;

} input[type=submit]:hover {

background-color: #45a049;

} input[disabled][type=submit] {

background:grey;

} div {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

}

3. Apply Reactive Forms Approach

We will declare our from inside the Component

import { FormGroup, FormControl } from ' @angular/forms '; export class App { contactForm: FormGroup;

constructor() {

this.contactForm = new FormGroup({

'firstName': new FormControl(''),

'lastName': new FormControl(''),

'age': new FormControl(''),

})

}



}

After that, we will map the contact form to our template.

<form [formGroup]="contactForm">

First name:

<input

type="text"

name="firstName"

formControlName="firstName"><br> Last name:

<input

type="text"

name="lastName"

formControlName="lastName"><br>



Age:

<input

type="number"

name="age"

formControlName="age"><br>

<input

type="submit"

value="Submit">

</form>

4. Control Form Submission

We need a function in the Component to control the form submission. The form value can be accessed through this.contactForm.value.

onSubmit() {

console.log(this.contactForm.value)

// POST request or whatever

}

And inside your template

<form (ngSubmit)="onSubmit()" [formGroup]="contactForm">

5. Add some validations

All the validation can be done inside the Component. For example, this will add required rule to all the input. You can read about other types of validator from Angular.io

import { FormGroup, FormControl, Validators } from '@angular/forms'; ... constructor() {

this.contactForm = new FormGroup({

'firstName': new FormControl('', [Validators.required]),

'lastName': new FormControl('', [Validators.required]),

'age': new FormControl('', [Validators.required]),

})

}

So, if the user didn’t fill out all the inputs, the form will be invalid. And you can have more control over the form by checking the validation.

<input

type="submit"

value="Submit"

[disabled]="!contactForm.valid">

For example, the submit button will be disabed if the form is invalid.

From now, you know how to create a reactive form and able to add some validations to it.