How to Reactive Forms with Validation in Angular 18?

Hi, Dev

In this tutorial, I'll guide you through creating reactive forms with validation in an Angular 18 application.

Reactive forms provide a model-driven approach for handling form inputs with dynamic value changes. To implement reactive forms in Angular 18, you need to import "ReactiveFormsModule" from the Angular Forms library. By utilizing FormControl, FormGroup, FormArray, and Validation classes, you can seamlessly integrate reactive forms into your Angular 18 applications.

For simple and basic forms in your Angular 18 application, reactive forms are a great choice. Here’s a clear example demonstrating how to use 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 - NiceSnippets.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: "Raxita Domadiya", email: "nicesnippets@gmail.com", body: "This is a test"}

I hope it can help you...