Form Validation in Angular

In this chapter, we will delve deeply into form validation in Angular. Form validation is a critical step to ensure that user-submitted data is both valid and conforms to expected requirements. Proper form validation enhances the user experience by providing timely feedback on input errors and prevents submission of invalid data.

Fundamentals of Form Validation

Angular supports form validation through two approaches: reactive forms and template-driven forms. In the previous chapter, we explored how to create and use both reactive and template-driven forms. Here, we focus specifically on implementing effective validation rules within these forms.

Common Built-in Validators

Angular provides several built-in validators that you can apply directly to form controls. Some of the most commonly used ones include:

• required: Ensures the field is not empty.
• minlength: Validates that the input string meets a minimum character length.
• maxlength: Validates that the input string does not exceed a maximum character length.
• pattern: Validates that the input matches a specified regular expression pattern.
• email: Validates that the input conforms to a standard email format.

Example Using Built-in Validators

Below is a simple example demonstrating how to apply these built-in validators in a reactive form.

First, define the form in the component:

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

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html'
})
export class RegistrationComponent implements OnInit {
  registrationForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.registrationForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(15)]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit(): void {
    if (this.registrationForm.valid) {
      console.log(this.registrationForm.value);
    } else {
      console.error('Form is invalid');
    }
  }
}

In this example, we create a form named registrationForm with three fields: username, email, and password. Each field is assigned appropriate validators to enforce input validity.

Displaying Validation Status in the Template

Next, we need to display validation status in the template so users can understand whether their input is valid. Below is the corresponding HTML template:

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="username">Username:</label>
    <input id="username" formControlName="username" />
    <div *ngIf="registrationForm.get('username').invalid && (registrationForm.get('username').touched || registrationForm.get('username').dirty)">
      <small *ngIf="registrationForm.get('username').errors?.required">Username is required.</small>
      <small *ngIf="registrationForm.get('username').errors?.minlength">Username must be at least 3 characters long.</small>
      <small *ngIf="registrationForm.get('username').errors?.maxlength">Username cannot exceed 15 characters.</small>
    </div>
  </div>

  <div>
    <label for="email">Email:</label>
    <input id="email" formControlName="email" />
    <div *ngIf="registrationForm.get('email').invalid && (registrationForm.get('email').touched || registrationForm.get('email').dirty)">
      <small *ngIf="registrationForm.get('email').errors?.required">Email is required.</small>
      <small *ngIf="registrationForm.get('email').errors?.email">Invalid email format.</small>
    </div>
  </div>

  <div>
    <label for="password">Password:</label>
    <input id="password" formControlName="password" type="password" />
    <div *ngIf="registrationForm.get('password').invalid && (registrationForm.get('password').touched || registrationForm.get('password').dirty)">
      <small *ngIf="registrationForm.get('password').errors?.required">Password is required.</small>
      <small *ngIf="registrationForm.get('password').errors?.minlength">Password must be at least 6 characters long.</small>
    </div>
  </div>

  <button type="submit">Register</button>
</form>

In the template, we use the *ngIf directive to conditionally render error messages based on the control’s validation state. The touched and dirty properties ensure error messages appear only after the user has interacted with the field.

Custom Validators

Beyond Angular’s built-in validators, you can also create custom validators to implement more sophisticated or domain-specific validation logic.

Example: Creating a Custom Validator

Here’s a simple custom validator that checks whether the input value matches an expected string:

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function customValidator(expectedValue: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const forbidden = control.value !== expectedValue;
    return forbidden ? { 'customError': { value: control.value } } : null;
  };
}

You can then apply this custom validator to a form control like so:

this.registrationForm = this.fb.group({
  username: ['', [Validators.required, customValidator('admin')]],
  // other fields...
});

Conclusion

In this chapter, we learned how to implement form validation in Angular—both using built-in validators and creating custom validation logic. Effective form validation not only improves the user experience but also ensures that collected data remains consistent and reliable.

Next, we’ll explore form controls in depth, examining how to manage and respond to their states in Angular applications.