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 Remove Elements From JavaScript Array
How to Remove Elements From Ja...

Today we will learn how to remove elements from javascript array, you can use diffrents javascript array...

Read More

Apr-07-2021

How to Create Slider using jQuery
How to Create Slider using jQu...

In this post we will see how to create slider using jquery, here we will use owl carousel for create slider using b...

Read More

Aug-04-2021

Autocomplete Search using Bootstrap Typeahead JS
Autocomplete Search using Boot...

In this example we will see autocomplete search using bootstrap typeahead js.Typeahead search is a method for progr...

Read More

Jun-09-2021

Bootstrap DateTimePicker Example
Bootstrap DateTimePicker Examp...

In this post i will show you how to implement bootstrap datetimepicker with example, bootstrap 4 datetimepicke...

Read More

Apr-02-2021