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.

ng serve

 


You might also like:

Recommended Post
Featured Post
How To Convert PHP Array To JSON Object
How To Convert PHP Array To JS...

In this article, we will explore the process of converting a PHP array into a JSON object. We'll achieve this transf...

Read More

Jul-08-2020

How To Validate Max File Size Using Javascript
How To Validate Max File Size...

This article will show us how to validate max file size using javascript. Many times we have a requirement to check...

Read More

Aug-03-2020

How to Install PHP DOM Extension in Ubuntu 23.04
How to Install PHP DOM Extensi...

In this tutorial, I will guide you through the process of installing the PHP DOM Extension in Ubuntu 23.04. The PHP DOM...

Read More

Jan-29-2024

How to Get Random Record in Laravel 10
How to Get Random Record in La...

Here you will learn how to get random records from DB in laravel using the inRandomOrder() method. Explore an...

Read More

Nov-10-2023