How to validate a reactive form in Angular 9 using model-driven approach.

In this article I will explain to you how to properly validate an Angular 9 reactive form using a model-driven approach.

1 — Create a new Angular 9 application

To demonstrate how a reactive form can be properly validated in an Angular 9 application we will need to start off by creating an empty Angular 9 application.

ng new ReactiveFormValidationAngular

2 — What is a reactive form

A reactive form provides a model-driven approach for handling for inputs whose values change over time.

3 — What are the steps needed to use form controls

There are three steps to using form controls:

  1. Generate a new FormControl instance and save it in the component
  2. Register the FormControl in the template.
  3. Lastly, in order to use reactive form controls, we must import the ReactiveFormsModule from @angular/forms package and add it to the ngModule’s import array.

4 —Register the reactive forms module

The first thing that we must do is register the ReactiveFormsModule in the src/app/app.module.ts file. Locate the file, open it and add the following import statement “import { ReactiveFormsModule } from ‘@angular/forms’” at the top of the file and make sure to also include the “ReactiveFormsModule” in the imports array inside the @NgModule decorator.

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

5 — Create a form controls grouping

Now switch over to “src/app/app.component.ts” file and add the following import statement at the top of the file:

import { FormGroup, FormControl, Validators } from ‘@angular/forms’;
profileForm = new FormGroup({
firstName: new FormControl('', [Validators.required]),
lastName: new FormControl('', [Validators.required])
});
onSubmit() {
alert("Form validated and submitted successfully!");
}

6 — Create the form in HTML

Now that we have the

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<div class="display-block">
<label>
First Name:
<input type="text" formControlName="firstName">
</label>
<div *ngIf="profileForm.controls['firstName'].touched &&
profileForm.controls['firstName'].invalid"
class="alert-danger">
<div *ngIf="profileForm.controls['firstName'].errors &&
pofileForm.controls['firstName'].errors.required">
First name is required.</div>
</div>
</div>
<div class="display-block margin-top-10">
<label>
Last Name:
<input type="text" formControlName="lastName">
</label>
<div *ngIf="profileForm.controls['lastName'].touched &&
profileForm.controls['lastName'].invalid"
class="alert-danger">
<div *ngIf="profileForm.controls['lastName'].errors &&
profileForm.controls['lastName'].errors.required">
Last name is required.</div>
</div>
</div>
<button type="submit
[disabled]="!profileForm.valid">Submit</button>
</form>

7 —Run application in browser

Alright, so now we have a form as well as validation. Let’s compile the code and run in the browser to see how the form behaves.

ng serve -o

8 — Conclusion

Voila! This article covered a step-by-step instruction demonstrating how easy it is to validate reactive forms. Although this article only showed a simple validation example, you can implement more complex validation for a more complex form.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store