How to Validate Reactive Form in Angular 17

Websolutionstuff | Mar-27-2024 | Categories : Angular

Hello developer, In this article, we'll see how to validate a reactive form in angular 17. Reactive forms provide a model-driven approach to handling form inputs whose values change over time. In angular 17 we'll simply validate a reactive form.

To implement Reactive Forms in Angular 17, it is essential to import "ReactiveFormsModule" from the Angular Forms library. You can import the FormGroup and FormControl classes from this package.

So, let's see Angular 17 form validation and Angular reactive form validation.

Step 1: Creating an Angular 17 Project

To start, I'll create a new Angular app for this demonstration. If you've already created one, there's no need to initiate a new Angular 17 app.

ng new angular-17-forms

Step 2: Updating Component ts File

I will import the necessary modules, including FormsModule and ReactiveFormsModule from the '@angular/forms' library, in the app.component.ts file

src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
  
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
  
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, FormsModule, ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'boot-app';
  
  form = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [Validators.required, Validators.email]),
    body: new FormControl('', Validators.required)
  });
    
  get f(){
    return this.form.controls;
  }
    
  submit(){
    console.log(this.form.value);
  }
}

Step 3: Creating a Form with ngModel

Now, I'll create an HTML form with ngModel. Also, I used Bootstrap class for form design.

src/app/app.component.html

<h1>How to Validate Reactive Form in Angular 17 - Techsolutionstuff</h1>
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
	<label for="name">Name</label>
	<input 
		formControlName="name"
		id="name" 
		type="text" 
		class="form-control">
	<div *ngIf="f['name'].touched && f['name'].invalid" class="alert alert-danger">
		<div *ngIf="f['name'].errors && f['name'].errors['required']">Name is required.</div>
		<div *ngIf="f['name'].errors && f['name'].errors['minlength']">Name should be minimum 3 character.</div>
	</div>
</div>
<div class="form-group">
	<label for="email">Email</label>
	<input 
		formControlName="email"
		id="email" 
		type="text" 
		class="form-control">
	<div *ngIf="f['email'].touched && f['email'].invalid" class="alert alert-danger">
		<div *ngIf="f['email'].errors && f['email'].errors['required']">Email is required.</div>
		<div *ngIf="f['email'].errors && f['email'].errors['email']">Please, enter valid email address.</div>
	</div>
</div>
<div class="form-group">
	<label for="body">Body</label>
	<textarea 
		formControlName="body"
		id="body" 
		type="text" 
		class="form-control">
        </textarea>
	<div *ngIf="f['body'].touched && f['body'].invalid" class="alert alert-danger">
		<div *ngIf="f['body'].errors && f['body'].errors['required']">Body is required.</div>
	</div>
</div>
<button class="btn btn-primary" [disabled]="form.invalid" type="submit">Submit</button>
</form>

Step 4: Running the Angular App

In the last step, I'll run the angular 17 application using the following command.