Reactive Form Validation in Angular 16

Reactive form validation in Angular is a means for validating user input in forms using reactive programming techniques. In Angular, forms can be created using template-driven forms or reactive forms. Reactive forms provide a more flexible and powerful approach to form validation than template-driven forms.

With Reactive Form Validation, you programmatically define and manage form controls and their associated validation rules using Angular’s FormGroup, FormControl, and Validator classes. This allows you to build complex forms with dynamic validation logic that can react to user input in real-time.

Reactive form validation in angular; In this tutorial, you will learn how to create and use the reactive form with validation in angular 16 projects.

Angular 16 Reactive Forms Validation Tutorial

Steps to create and use reactive Form with validation in the angular 16 apps:

• Step 1 – Set up a new Angular project
• Step 2 – Import Form Module
• Step 3 – Create a Reactive Form
• Step 4 – Update Component ts File
• Step 5 – Start Angular App

Step 1 – Set up a new Angular project

First of all, open your command prompt or cmd and execute the following command into it to install the angular 16 apps into your system:

ng new my-new-app

Step 2 – Import Module

Now, you need to open app.module.ts to import some modules. So, go to src/app/ directory and open the app.module.ts file.

Then import ReactiveFormsModule in this file, as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 – Create a Reactive Form

Next, you need to create a simple reactive form with input file element. So, visit src/app directory and open app.component.html file.

Then add the following code into it for simple reactive form in angular apps; as follows:

<h1>Angular 16 Reactive Forms Validation Example - Tutsmake.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>

Step 4 – Update Component ts File

Visit the src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  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 5 – Start Angular App

In this step, execute the following command on the command prompt or cmd to start the angular project:

ng serve

Navigate to http://localhost:4200 in your web browser to see the form with validation in action.

Conclusion

That’s it! You now have a working Angular 16 reactive form with validation. As a user interacts with the form, the validation messages will appear dynamically based on the defined validation rules.

Recommended Tutorials