Custom validators in Angular - Deep Dive

Overview - Custom validators

What is it?

Custom validators in Angular are functions you write to check if form inputs meet specific rules you define. They help you control what users can enter beyond built-in checks like required or email format. These validators return errors if the input is invalid or nothing if it is valid. This way, you can make forms smarter and more tailored to your app's needs.

Why it matters

Without custom validators, you would be stuck with only basic checks and could not enforce your app's unique rules. This could lead to bad data, confusing user experiences, or security issues. Custom validators let you catch mistakes early and guide users to enter correct information, making your app reliable and user-friendly.

Where it fits

Before learning custom validators, you should understand Angular forms and built-in validators. After mastering custom validators, you can explore async validators and advanced form state management. This topic fits in the journey of building robust, interactive forms in Angular.

Mental Model

Core Idea

A custom validator is a function that inspects form input and returns errors if the input breaks your specific rules, or null if it passes.

Think of it like...

It's like a security guard checking each visitor's ID against a special list of rules before letting them enter a building.

Form Control Input
    ↓
Custom Validator Function
    ↓
Returns null (valid) or error object (invalid)
    ↓
Form updates validation state and shows messages

Build-Up - 7 Steps

1

Foundation

Understanding Angular Form Controls

Concept: Learn what form controls are and how Angular tracks their values and states.

Angular forms use FormControl objects to represent each input field. These controls hold the current value, track if the user touched or changed the input, and store validation status. You create a FormControl and bind it to an input in your template to manage its state.

Result

You can read and update input values programmatically and know if the input is valid or not.

Understanding FormControl is key because validators work by inspecting these controls' values and states.

2

Foundation

Using Built-in Validators

Concept: Angular provides ready-made validators like required and minLength to check inputs.

You add built-in validators when creating a FormControl by passing them as arguments. Angular runs these validators automatically and updates the control's validity. For example, Validators.required ensures the input is not empty.

Result

The form control becomes invalid if the input breaks any built-in rule, and Angular tracks which rule failed.

Knowing built-in validators shows the pattern custom validators must follow to integrate smoothly.

3

Intermediate

Writing a Simple Custom Validator Function

🤔Before reading on: do you think a custom validator returns true/false or an object/null? Commit to your answer.

Concept: Custom validators are functions that take a control and return null if valid or an error object if invalid.

A custom validator is a function with one parameter: the FormControl to check. It returns null when the input is valid, or an object with error details when invalid. For example, a validator that checks if a number is even returns { 'notEven': true } if odd, else null.

Result

Angular uses the returned object to mark the control invalid and show error messages.

Understanding the return type is crucial because Angular relies on null vs object to know validity.

4

Intermediate

Applying Custom Validators to Form Controls

🤔Before reading on: do you think you add custom validators like built-in ones or differently? Commit to your answer.

Concept: You attach custom validators to FormControls just like built-in ones, by passing them in the validators array.

When creating a FormControl, you pass your custom validator function alongside built-in validators. Angular runs all validators together and combines their results. For example: new FormControl('', [Validators.required, myCustomValidator]).

Result

The control's validity reflects all validators, and errors from custom validators appear in the errors object.

Knowing how to combine validators lets you build complex validation logic easily.

5

Intermediate

Creating Parameterized Custom Validators

🤔Before reading on: do you think custom validators can accept extra settings like min length? Commit to your answer.

Concept: Custom validators can be functions that return validator functions, allowing parameters.

To make reusable validators, write a function that takes parameters and returns the actual validator function. For example, a minValue validator factory takes a number and returns a validator that checks if input is at least that number.

Result

You get flexible validators that adapt to different rules without rewriting code.

Understanding this pattern unlocks powerful, reusable validation logic.

6

Advanced

Validating Cross-Field Dependencies

🤔Before reading on: do you think validators can check multiple fields at once or only one? Commit to your answer.

Concept: Validators can be applied to form groups to check relationships between multiple controls.

Sometimes validation depends on more than one input, like confirming passwords match. You write a validator for the FormGroup that inspects multiple controls and returns errors if rules fail. This validator is attached to the group, not individual controls.

Result

You can enforce rules involving multiple fields, improving form correctness.

Knowing group validators lets you handle complex validation scenarios beyond single inputs.

7

Expert

Handling Async Validation and Performance

🤔Before reading on: do you think custom validators can be asynchronous? Commit to your answer.

Concept: Angular supports async validators that return promises or observables for checks like server calls.

Async validators return a Promise or Observable that resolves to null or an error object. Angular waits for the result before marking the control valid or invalid. This is useful for checking usernames or emails against a database.

Result

Forms can validate inputs with external data sources without blocking the UI.

Understanding async validators is key for real-world apps needing server-side validation and smooth user experience.

Under the Hood

Angular runs validators by calling each validator function with the current FormControl or FormGroup. Validators return null if valid or an error object if invalid. Angular merges all error objects into one errors property on the control. For async validators, Angular subscribes to the returned observable or promise and updates validity when it resolves. This process happens on every value change, keeping validation state current.

Why designed this way?

This design keeps validation logic separate and reusable as pure functions. Returning null or error objects is simple and consistent, allowing Angular to combine multiple validators easily. Supporting async validators with observables fits Angular's reactive programming style and avoids blocking the UI. Alternatives like throwing errors or callbacks would complicate integration and reduce flexibility.

┌───────────────┐
│ FormControl   │
│ (input value) │
└──────┬────────┘
       │
       ▼
┌─────────────────────┐
│ Validator Functions  │
│ (sync and async)    │
└──────┬──────────────┘
       │
       ▼
┌─────────────────────┐
│ Validation Results   │
│ (null or error obj) │
└──────┬──────────────┘
       │
       ▼
┌─────────────────────┐
│ FormControl.errors   │
│ FormControl.valid   │
└─────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do custom validators return true/false or null/error object? Commit to your answer.

Common Belief: Custom validators return true if valid and false if invalid.

Reality: Custom validators return null if valid and an error object if invalid.

Why it matters: Returning true/false breaks Angular's validation system, causing incorrect form states and no error messages.

Quick: Can custom validators access other form controls directly? Commit to your answer.

Common Belief: Custom validators on a control can freely check values of other controls.

Reality: Validators on a FormControl only receive that control; cross-field checks require group validators.

Why it matters: Trying to access sibling controls in a control validator leads to bugs and inconsistent validation.

Quick: Are async validators just like sync validators but slower? Commit to your answer.

Common Belief: Async validators behave exactly like sync validators but take more time.

Reality: Async validators return observables or promises and Angular handles them differently, waiting for results before updating validity.

Why it matters: Misunderstanding async validators causes UI glitches or premature validation states.

Quick: Does adding many validators always improve form quality? Commit to your answer.

Common Belief: More validators always make forms better and safer.

Reality: Too many validators can confuse users and hurt performance; validation should be meaningful and user-friendly.

Why it matters: Over-validating frustrates users and can cause slow form responses.

Expert Zone

1

Custom validators should be pure functions without side effects to ensure predictable validation and easier testing.

2

When stacking multiple validators, Angular merges error objects; naming error keys uniquely prevents overwriting errors.

3

Async validators can cause race conditions if not managed carefully, especially when users type quickly; using debounce or switchMap helps.

When NOT to use

Avoid custom validators when built-in validators suffice for common rules like required or email. For complex validation involving external data, prefer async validators. If validation logic is very complex or reused across many forms, consider creating reusable validator services or directives instead.

Production Patterns

In real apps, custom validators often enforce business rules like password strength, username uniqueness, or date ranges. Group validators handle cross-field checks like matching passwords. Async validators check server data without blocking UI. Validators are combined with reactive forms for dynamic, responsive validation feedback.

Connections

Reactive Programming

Custom validators, especially async ones, use observables which are core to reactive programming.

Understanding observables helps grasp how Angular handles async validation smoothly and reactively.

Functional Programming

Custom validators are pure functions that take input and return output without side effects.

Knowing functional programming principles clarifies why validators are designed as pure functions and how to write predictable validation logic.

Quality Control in Manufacturing

Validators act like quality inspectors checking products against standards before approval.

Seeing validation as quality control helps appreciate its role in preventing defects and ensuring reliability.

Common Pitfalls

#1 Writing a validator that returns true/false instead of null/error object.

Wrong approach:

function myValidator(control) { return control.value.length > 3; }

Correct approach:

function myValidator(control) { return control.value.length > 3 ? null : { 'tooShort': true }; }

Root cause:

Misunderstanding Angular's validation contract causes invalid form states and no error reporting.

#2 Trying to validate multiple fields inside a single FormControl validator.

Wrong approach:

function crossCheckValidator(control) { if (control.value !== control.parent.get('other').value) return { 'mismatch': true }; return null; }

Correct approach:

function groupValidator(group) { const val1 = group.get('field1').value; const val2 = group.get('field2').value; return val1 === val2 ? null : { 'mismatch': true }; }

Root cause:

Validators on controls only receive that control, so cross-field logic must be on the group level.

#3 Not handling async validator observables properly, causing multiple validations to overlap.

Wrong approach:

function asyncValidator(control) { return httpCall(control.value); } // no debounce or cancellation

Correct approach:

function asyncValidator(control) { return control.valueChanges.pipe(debounceTime(300), switchMap(value => httpCall(value))); }

Root cause:

Ignoring rapid input changes leads to race conditions and inconsistent validation results.

Key Takeaways

Custom validators in Angular are pure functions that return null when input is valid or an error object when invalid.

They integrate seamlessly with Angular forms by being attached to FormControls or FormGroups alongside built-in validators.

Parameterized validator factories enable reusable and flexible validation logic across different inputs.

Async validators allow validation against external data sources without blocking the user interface.

Understanding the distinction between control and group validators is essential for handling single-field and cross-field validation scenarios.