Angular 18 Reactive Forms with Validation Example
In this tutorial, I will show you how to create reactive forms with validation in angular 18 application.
Reactive forms offer a model-driven strategy for managing form inputs with dynamic value changes. To implement Reactive forms in Angular 18, it is essential to import "ReactiveFormsModule" from the Angular Forms library. Utilizing FormControl, FormGroup, FormArray, and Validation classes, we can effectively integrate Reactive forms into Angular 18 applications.
For uncomplicated and fundamental forms within your Angular 18 application, opting for Reactive forms is recommended. Here's a straightforward illustration showcasing Reactive forms with validation in Angular 18.
Step for Reactive Form in Angular 18
- Step 1: Create Angular 18 Project
- Step 2: Update Component ts File
- Step 3:Form with ngModel
- Run Angular App
You need to follow the below steps to create reactive forms in angular 18.
Step 1: Create Angular 18 Project
To begin, create a new Angular app for this demonstration. If you've already created one, there's no need to initiate a new Angular 18 app.
ng new my-new-app
Step 2: Update Component ts File
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: Form with ngModel
Implement the HTML form with ngModel. Bootstrap classes have been applied for styling.
I used bootstrap class on this form. if you want to add than then follow this link too: Install Bootstrap 5 to Angular 18.
src/app/app.component.html
<h1>Angular 18 Reactive Forms Validation Example - ItSolutionStuff.com</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 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>
Run Angular App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:
ng serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:4200
Output
{name: "Hardik Savani", email: "itsolutionstuff@gmail.com", body: "This is a test"}
I hope it can help you...