Skip to main content

Angular Form Validation

Form validation is a critical aspect of web development that helps ensure the data submitted by users is in the correct format before processing. In Angular, you have powerful tools to implement client-side validation that provides immediate feedback to users, improving the overall user experience of your application.

Introduction to Form Validation​

Form validation in Angular can be implemented using either template-driven forms or reactive forms. Both approaches offer robust validation capabilities, but they differ in how validation rules are defined and how you interact with the form data.

Angular provides built-in validators that can be applied to form controls to check conditions such as:

  • Required fields
  • Minimum and maximum length
  • Pattern matching (using regular expressions)
  • Email format validation
  • Custom validation logic

In this guide, we'll explore both approaches and learn how to implement form validation effectively in your Angular applications.

Basic Concepts​

Before diving into implementation, let's understand some basic validation concepts in Angular:

  • Validators: Functions that check form controls against specific criteria
  • Validation States: Angular tracks validation states like valid, invalid, pristine, dirty, touched, and untouched
  • Error Objects: When validation fails, Angular provides error objects that describe what went wrong
  • Visual Feedback: Using validation states to provide visual cues to users

Template-Driven Form Validation​

Template-driven forms use directives in the HTML template to handle form validation.

Setting up a Template-Driven Form​

First, make sure to import the FormsModule in your application module:

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Adding Basic Validators​

Let's create a simple registration form with validation:

html
<form #registrationForm="ngForm" (ngSubmit)="onSubmit(registrationForm)">
  <div class="form-group">
    <label for="name">Name</label>
    <input 
      type="text" 
      id="name" 
      name="name" 
      class="form-control"
      [(ngModel)]="user.name" 
      required 
      minlength="3" 
      #nameInput="ngModel">
    
    <div *ngIf="nameInput.invalid && (nameInput.dirty || nameInput.touched)" class="error-text">
      <div *ngIf="nameInput.errors?.['required']">Name is required.</div>
      <div *ngIf="nameInput.errors?.['minlength']">
        Name must be at least 3 characters long.
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      class="form-control"
      [(ngModel)]="user.email" 
      required 
      email
      #emailInput="ngModel">
    
    <div *ngIf="emailInput.invalid && (emailInput.dirty || emailInput.touched)" class="error-text">
      <div *ngIf="emailInput.errors?.['required']">Email is required.</div>
      <div *ngIf="emailInput.errors?.['email']">Please enter a valid email address.</div>
    </div>
  </div>

  <button type="submit" [disabled]="registrationForm.invalid">Register</button>
</form>

In your component:

typescript
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent {
  user = {
    name: '',
    email: ''
  };

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted successfully', this.user);
      // Process form data
    }
  }
}

Add some CSS to show validation states:

css
input.ng-invalid.ng-touched {
  border: 1px solid red;
}

input.ng-valid.ng-touched {
  border: 1px solid green;
}

.error-text {
  color: red;
  font-size: 0.8rem;
  margin-top: 5px;
}

Custom Validator Directive​

You can create custom validators as directives. Let's create a directive that validates a password field:

typescript
import { Directive } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, Validator } from '@angular/forms';

@Directive({
  selector: '[appPasswordValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: PasswordValidatorDirective,
    multi: true
  }]
})
export class PasswordValidatorDirective implements Validator {
  validate(control: AbstractControl): {[key: string]: any} | null {
    const value = control.value;
    
    if (!value) {
      return null;
    }
    
    const hasUpperCase = /[A-Z]/.test(value);
    const hasLowerCase = /[a-z]/.test(value);
    const hasNumeric = /[0-9]/.test(value);
    const passwordValid = hasUpperCase && hasLowerCase && hasNumeric;
    
    return !passwordValid ? { 'passwordStrength': true } : null;
  }
}

Then use it in your template:

html
<div class="form-group">
  <label for="password">Password</label>
  <input 
    type="password" 
    id="password" 
    name="password" 
    class="form-control"
    [(ngModel)]="user.password" 
    required 
    minlength="8"
    appPasswordValidator
    #passwordInput="ngModel">
  
  <div *ngIf="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)" class="error-text">
    <div *ngIf="passwordInput.errors?.['required']">Password is required.</div>
    <div *ngIf="passwordInput.errors?.['minlength']">
      Password must be at least 8 characters long.
    </div>
    <div *ngIf="passwordInput.errors?.['passwordStrength']">
      Password must contain uppercase, lowercase, and numeric characters.
    </div>
  </div>
</div>

Reactive Form Validation​

Reactive forms provide a model-driven approach to handling form inputs and validation.

Setting up a Reactive Form​

Import ReactiveFormsModule in your application module:

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Creating a Form with Validators​

Here's how to create a reactive form with validation:

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

@Component({
  selector: 'app-reactive-registration',
  templateUrl: './reactive-registration.component.html',
  styleUrls: ['./reactive-registration.component.css']
})
export class ReactiveRegistrationComponent implements OnInit {
  registrationForm!: FormGroup;
  submitted = false;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.registrationForm = this.formBuilder.group({
      name: ['', [
        Validators.required,
        Validators.minLength(3)
      ]],
      email: ['', [
        Validators.required,
        Validators.email
      ]],
      password: ['', [
        Validators.required,
        Validators.minLength(8),
        this.passwordStrengthValidator
      ]]
    });
  }

  // Custom validator function
  passwordStrengthValidator(control: any) {
    const value = control.value;
    
    if (!value) {
      return null;
    }
    
    const hasUpperCase = /[A-Z]/.test(value);
    const hasLowerCase = /[a-z]/.test(value);
    const hasNumeric = /[0-9]/.test(value);
    const passwordValid = hasUpperCase && hasLowerCase && hasNumeric;
    
    return !passwordValid ? { 'passwordStrength': true } : null;
  }

  // Getter for easy access to form fields
  get f() { 
    return this.registrationForm.controls; 
  }

  onSubmit() {
    this.submitted = true;

    if (this.registrationForm.invalid) {
      return;
    }

    console.log('Form submitted successfully', this.registrationForm.value);
    // Process form data
  }
}

And the corresponding template:

html
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name</label>
    <input 
      type="text" 
      id="name" 
      formControlName="name" 
      class="form-control"
      [ngClass]="{'is-invalid': submitted && f['name'].errors}">
    
    <div *ngIf="submitted && f['name'].errors" class="error-text">
      <div *ngIf="f['name'].errors['required']">Name is required.</div>
      <div *ngIf="f['name'].errors['minlength']">
        Name must be at least 3 characters long.
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      formControlName="email" 
      class="form-control"
      [ngClass]="{'is-invalid': submitted && f['email'].errors}">
    
    <div *ngIf="submitted && f['email'].errors" class="error-text">
      <div *ngIf="f['email'].errors['required']">Email is required.</div>
      <div *ngIf="f['email'].errors['email']">Please enter a valid email address.</div>
    </div>
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input 
      type="password" 
      id="password" 
      formControlName="password" 
      class="form-control"
      [ngClass]="{'is-invalid': submitted && f['password'].errors}">
    
    <div *ngIf="submitted && f['password'].errors" class="error-text">
      <div *ngIf="f['password'].errors['required']">Password is required.</div>
      <div *ngIf="f['password'].errors['minlength']">
        Password must be at least 8 characters long.
      </div>
      <div *ngIf="f['password'].errors['passwordStrength']">
        Password must contain uppercase, lowercase, and numeric characters.
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Register</button>
</form>

Cross-Field Validation​

Sometimes you need to validate fields in relation to each other. A common example is password confirmation:

typescript
ngOnInit() {
  this.registrationForm = this.formBuilder.group({
    name: ['', [Validators.required, Validators.minLength(3)]],
    email: ['', [Validators.required, Validators.email]],
    passwordGroup: this.formBuilder.group({
      password: ['', [
        Validators.required,
        Validators.minLength(8),
        this.passwordStrengthValidator
      ]],
      confirmPassword: ['', Validators.required]
    }, { validators: this.passwordMatchValidator })
  });
}

// Cross-field validator
passwordMatchValidator(group: FormGroup) {
  const password = group.get('password')?.value;
  const confirmPassword = group.get('confirmPassword')?.value;

  return password === confirmPassword ? null : { 'passwordMismatch': true };
}

And in your template:

html
<div formGroupName="passwordGroup">
  <div class="form-group">
    <label for="password">Password</label>
    <input 
      type="password" 
      id="password" 
      formControlName="password" 
      class="form-control">
    
    <!-- Password field validations -->
  </div>

  <div class="form-group">
    <label for="confirmPassword">Confirm Password</label>
    <input 
      type="password" 
      id="confirmPassword" 
      formControlName="confirmPassword" 
      class="form-control">
    
    <!-- Confirm password field validations -->
  </div>

  <div *ngIf="submitted && registrationForm.get('passwordGroup')?.errors?.['passwordMismatch']" class="error-text">
    Passwords do not match.
  </div>
</div>

Asynchronous Validation​

Sometimes you need to validate against a backend service, such as checking if a username is already taken:

typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AbstractControl, AsyncValidator, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { map, catchError, debounceTime, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class UsernameValidator implements AsyncValidator {
  constructor(private http: HttpClient) {}

  validate(control: AbstractControl): Observable<ValidationErrors | null> {
    return of(control.value).pipe(
      debounceTime(500),
      switchMap(username => {
        return this.http.get<any>(`/api/check-username?username=${username}`).pipe(
          map(response => response.isTaken ? { usernameTaken: true } : null),
          catchError(() => of(null))
        );
      })
    );
  }
}

Then use it in your form:

typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UsernameValidator } from './username.validator';

@Component({
  // ...
})
export class RegistrationComponent implements OnInit {
  registrationForm!: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private usernameValidator: UsernameValidator
  ) {}

  ngOnInit() {
    this.registrationForm = this.formBuilder.group({
      username: ['', 
        [Validators.required, Validators.minLength(4)], 
        [this.usernameValidator.validate.bind(this.usernameValidator)]
      ],
      // other fields...
    });
  }
}

In your template, you can show a loading indicator:

html
<div class="form-group">
  <label for="username">Username</label>
  <input 
    type="text" 
    id="username" 
    formControlName="username" 
    class="form-control">
  
  <div *ngIf="f['username'].pending" class="loading">
    Checking availability...
  </div>
  
  <div *ngIf="f['username'].errors?.['usernameTaken']" class="error-text">
    This username is already taken.
  </div>
</div>

Real-world Example: Complete Registration Form​

Let's put it all together with a complete registration form example using reactive forms:

typescript
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UsernameValidator } from './username.validator';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  registrationForm!: FormGroup;
  submitted = false;
  
  constructor(
    private formBuilder: FormBuilder,
    private usernameValidator: UsernameValidator
  ) {}
  
  ngOnInit() {
    this.registrationForm = this.formBuilder.group({
      fullName: ['', [Validators.required, Validators.minLength(3)]],
      username: [
        '', 
        [Validators.required, Validators.minLength(4)],
        [this.usernameValidator.validate.bind(this.usernameValidator)]
      ],
      email: ['', [Validators.required, Validators.email]],
      passwordGroup: this.formBuilder.group({
        password: ['', [
          Validators.required, 
          Validators.minLength(8),
          this.passwordStrengthValidator
        ]],
        confirmPassword: ['', Validators.required]
      }, { validators: this.passwordMatchValidator }),
      address: this.formBuilder.group({
        street: ['', Validators.required],
        city: ['', Validators.required],
        state: ['', Validators.required],
        zip: ['', [
          Validators.required, 
          Validators.pattern('^[0-9]{5}(?:-[0-9]{4})?$')
        ]]
      }),
      terms: [false, Validators.requiredTrue]
    });
  }
  
  // Validator methods from previous examples
  passwordStrengthValidator(control: any) {
    // Implementation as shown earlier
  }
  
  passwordMatchValidator(group: FormGroup) {
    // Implementation as shown earlier
  }
  
  // Getter for easy form access
  get f() {
    return this.registrationForm.controls;
  }
  
  onSubmit() {
    this.submitted = true;
    
    if (this.registrationForm.invalid) {
      // Mark all fields as touched to trigger validation display
      Object.keys(this.registrationForm.controls).forEach(key => {
        const control = this.registrationForm.get(key);
        control?.markAsTouched();
      });
      return;
    }
    
    // Form is valid, proceed with submission
    console.log('Registration successful', this.registrationForm.value);
    // API call to register user
  }
}

The complete form template would be quite long, but it would follow the patterns shown in the previous examples.

Best Practices for Form Validation​

  1. Provide immediate feedback: Use Angular's validation states to show errors as soon as they occur.
  2. Use distinctive visual cues: Apply consistent styling for valid and invalid states.
  3. Be specific with error messages: Tell users exactly what's wrong and how to fix it.
  4. Validate on the server side too: Client-side validation is for user experience, but always validate on the server for security.
  5. Don't overwhelm users: Show only relevant errors and consider prioritizing errors.
  6. Use appropriate validators: Choose the right validators for each field based on business requirements.
  7. Test your forms: Test with different input scenarios to ensure validation works correctly.

Summary​

In this guide, we've covered:

  • Basic form validation concepts in Angular
  • Template-driven form validation with built-in and custom validators
  • Reactive form validation with synchronous and asynchronous validators
  • Cross-field validation for related form controls
  • Practical examples of form validation
  • Best practices for implementing form validation

Form validation is essential for creating user-friendly applications that collect accurate data. Angular provides a comprehensive set of tools to implement validation in both template-driven and reactive forms. By understanding these concepts and implementing them correctly, you can create forms that guide users to provide the right information the first time.

Additional Resources​

Exercises​

  1. Create a login form with email and password validation.
  2. Implement a product review form that validates star ratings (1-5) and comment length.
  3. Build a multi-step form with validation at each step before proceeding.
  4. Create a custom validator that ensures a username contains no special characters.
  5. Implement a form with dynamic validation rules that change based on user selections.

Happy coding!


If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)