ReviseAlgo Logo

Forms

Forms Validation

Master Angular Forms Validation, covering built-in validators, custom validation functions, async validation, and cross-field validators.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will master form validation in Angular. By the end of this topic, you will be able to:

  • Apply built-in validators (required, minLength, email) to form controls.
  • Write custom validation functions (ValidatorFn) for specialized rules.
  • Create cross-field validators to compare values of multiple inputs (e.g. matching passwords).
  • Implement asynchronous validators (AsyncValidatorFn) for server-side checks (e.g. checking if a username is taken).
  • Render user-friendly error messages based on control state.

2. Overview

Angular provides a robust framework for validating form inputs. Validation can be synchronous (immediate evaluation) or asynchronous (resolving via a Promise or Observable). You can apply validation to individual controls or across entire form groups to ensure data integrity before submission.

3. Why This Topic Matters

Proper form validation is essential for application security and a good user experience:

  • Submitting Bad Data: Without client-side validation, users can submit malformed values, causing server-side database errors or crashes. Angular validation rules catch errors early, preventing form submission until all rules pass.
  • Custom Validator Signature Errors: A common developer mistake is having custom validation functions return a boolean value (like true or false) instead of the required signature: an error object containing the validation key if validation fails, or null if it passes.

4. Real-World Analogy

Think of form validation like **security screening at an airport terminal**:

  • Built-in Validators (Standard Ticket Check): Security checks if you have a boarding pass and ID (required fields). If you don't, you cannot enter the queue.
  • Custom Validators (Luggage Weight Check): The airline checks if your bag fits weight limits. If the bag is too heavy, the scales flag it (returning an error object like { overweight: true }). If it is within limits, you pass through (returning null).
  • Asynchronous Validators (Passport Verification): Security checks your passport number against an international database. Since the database check takes a few moments, you must wait in line until the query returns a result.

5. Core Concepts

Angular validation relies on several key concepts:

  • ValidatorFn: A synchronous validation function that takes an AbstractControl and returns an object containing validation error keys (ValidationErrors) if validation fails, or null if it passes.
  • AsyncValidatorFn: An asynchronous validation function that returns an Observable or Promise containing validation error keys or null. Useful for network requests.
  • Cross-Field Validation: A validator function applied directly to a FormGroup rather than an individual control. This lets you compare sibling values (such as verifying password and confirm-password fields match).
Validator Type Return Value (Pass) Return Value (Fail) Execution
Synchronous null ValidationErrors (e.g. { required: true }) Runs immediately on input changes.
Asynchronous Observable / Promise resolving to null Observable / Promise resolving to ValidationErrors Runs only after all synchronous validators pass.

6. Syntax & API Reference

Below is a custom validation function that checks if an input matches a forbidden username pattern:

7. Visual Diagram

This diagram displays how Angular validates controls:

8. Live Example — Full Working Code

Below is a standalone component that uses built-in validators, a custom validator, and a cross-field password matching validator:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the forbidden name validator regex pattern to block the word "root" and test the form inputs.
  2. Test what happens when the password fields mismatch vs match.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Returning boolean from custom validators Writing custom validation functions that return true or false instead of an error object or null. Angular treats any returned object as an error, so returning false is interpreted as validation passing, which is incorrect. return isValid ? true : false; return isValid ? null : { customError: true };

11. Best Practices

  • Return null on success: Ensure all synchronous and asynchronous validator functions return null when validation checks pass.
  • Place cross-field validators on the FormGroup: Apply cross-field validation rules (like comparing start and end date properties) directly to the parent FormGroup container, rather than individual inputs.
  • Optimize network requests for async validators: Run asynchronous validators (such as checking if an email is taken) only after all synchronous validators have passed. Use debounce operators to limit the frequency of network requests.

12. Browser Compatibility/Requirements

Angular validation relies on standard TypeScript control mechanisms and does not require specialized browser APIs, rendering consistently across all modern web browsers.

13. Interview Questions

🟢 Q1: What is the signature of a synchronous validator function in Angular?

Answer: A synchronous validator function takes a single parameter of type AbstractControl and returns an object of type ValidationErrors (keys mapping to error details) if validation fails, or null if it passes.

14. Debugging Exercise

Identify and fix the logic bug in this custom validator function:

View Solution

Diagnosis: The validator function returns boolean values (true and false). In Angular, any returned truthy value (including true) is treated as a validation failure object, while falsy values (like false or null) represent validation passing. To fix this, return an error object when validation fails, and null when it passes.

Fixed validator:

15. Practice Exercises

Exercise 1: Create a password security checker

Build a custom validator that checks if a password contains at least one special character (like ! or ?). Show an error message in the template if validation fails.

16. Scenario-Based Challenge

The Multi-Field Date Span Challenge:

You must build a flight booking form with departure and return date input fields. The form must prevent submission if the return date is set before the departure date. Write a cross-field validator function to handle this validation rule.

17. Quick Quiz

Q1: What should a custom validator function return when the input value is valid and passes all rules?

A) true

B) false

C) null

Answer: C — A validator function must return null when validation checks pass successfully.

18. Summary & Key Takeaways

  • • Validator functions must return null when validation passes, or an error object if it fails.
  • • Apply cross-field validation rules directly to the parent FormGroup container to compare sibling control values.
  • • Use async validators for server-side checks, running them only after all synchronous checks pass.

19. Cheat Sheet

Validator Interface Signature Return Format
ValidatorFn (control: AbstractControl): ValidationErrors | null
---