Reactive Form Validation in Angular

Reactive Form-Validation

Reactive forms are perfect when you need more control and flexibility in your forms. They let you define validation rules in the TypeScript class instead of the template and give you powerful tools to handle complex validation logic.

Example: Create a reactive form in Angular and add real-time validation

Step 1: Create a new Angular project

ng new angular-forms

Step 2: Generate a form component

ng g c form-component

Step 3: Build the form with validation in HTML

In form-component.component.html

<div>
    <h1>Reactive Form Validation</h1>
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">

        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" id="name" formControlName="name">
            <div *ngIf="myForm.get('name').hasError('required') && myForm.get('name').touched"
                class="alert alert-danger">
                Name is required.
            </div>
            <div *ngIf="myForm.get('name').hasError('minlength') && myForm.get('name').touched"
                class="alert alert-danger">
                Name must be at least 3 characters long.
            </div>
        </div>
        <pre></pre>

        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" formControlName="email">
            <div *ngIf="myForm.get('email').hasError('required') && myForm.get('email').touched"
                class="alert alert-danger">
                Email is required.
            </div>
            <div *ngIf="myForm.get('email').hasError('email') && myForm.get('email').touched"
                class="alert alert-danger">
                Invalid email format.
            </div>
        </div>
        <pre></pre>

        <button type="submit" [disabled]="myForm.invalid">Submit</button>
    </form>
</div>

Step 4: Add form logic and validation rules in TypeScript

In form-component.component.ts

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

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

  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Form submitted with data:', this.myForm.value);
    }
  }
}

Step 5: Add CSS for better styling

In form-component.component.css

div {
  text-align: center;
}

label {
  text-align: left;
}

.alert {
  color: red;
  font-size: 0.9em;
}

Step 6: Add the form to the main app

In app.component.html

<app-form-component></app-form-component>

And import ReactiveFormsModule in app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  // other code...
})
export class AppModule { }

Step 7: Run the application

ng serve

Go to http://localhost:4200 and test your form with validation.

Key Point

Reactive forms define validation in the TypeScript class, giving you more power and flexibility.

Use built-in validators like required, minlength, and email easily with FormBuilder.

Show real-time error messages when fields are touched and invalid.