Custom validators in Angular - Step-by-Step Execution

Concept Flow - Custom validators

Start Form Input

↓

Trigger Validation

↓

Call Custom Validator Function

↓

Check Input Value

↓

Return null

↓

Update Form Control Status

↓

Show Validation Result

When a form input changes, Angular calls the custom validator function which checks the input and returns null if valid or an error object if invalid.

Execution Sample

Angular

function forbiddenNameValidator(name: string) {
  return (control: AbstractControl) => {
    return control.value === name ? { forbiddenName: true } : null;
  };
}

This custom validator checks if the input value matches a forbidden name and returns an error if it does.

Execution Table

Step	Input Value	Validator Check	Return Value	Form Control Status
1	"Alice"	Is value 'Alice' equal to 'Bob'?	null	VALID
2	"Bob"	Is value 'Bob' equal to 'Bob'?	{ forbiddenName: true }	INVALID
3	"Charlie"	Is value 'Charlie' equal to 'Bob'?	null	VALID
4	"Bob"	Is value 'Bob' equal to 'Bob'?	{ forbiddenName: true }	INVALID
5	null	Is value null equal to 'Bob'?	null	VALID

💡 Validation stops after returning null or error object for each input value.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5
control.value	undefined	"Alice"	"Bob"	"Charlie"	"Bob"	null
return value	undefined	null	{ forbiddenName: true }	null	{ forbiddenName: true }	null
form control status	PENDING	VALID	INVALID	VALID	INVALID	VALID

Key Moments - 3 Insights

Why does the validator return null when the input is valid?

Returning null means no error. The execution_table shows that when the input is not the forbidden name, the validator returns null, marking the control as VALID.

What happens if the input value is null or empty?

The validator treats null or empty as valid and returns null, as shown in step 5 of the execution_table.

How does Angular know the control is invalid?

When the validator returns an error object like { forbiddenName: true }, Angular marks the control INVALID, as seen in steps 2 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the form control status at step 3?

A VALID

B INVALID

C PENDING

D DISABLED

💡 Hint

Check the 'Form Control Status' column at step 3 in the execution_table.

At which step does the validator return an error object?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look for '{ forbiddenName: true }' in the 'Return Value' column in the execution_table.

If the forbidden name changes to 'Alice', what would be the return value at step 1?

A null

B undefined

C { forbiddenName: true }

D false

💡 Hint

Refer to the validator logic and the 'Return Value' column in the execution_table.

Concept Snapshot

Custom validators are functions that check form input values.
They return null if input is valid, or an error object if invalid.
Angular uses this to mark form controls VALID or INVALID.
You write them as functions returning another function that takes control.
Use them to enforce rules beyond built-in validators.

Full Transcript

Custom validators in Angular are functions that check if a form input meets specific rules. When the user types or changes input, Angular calls the validator function. The validator looks at the input value and returns null if the input is allowed, or an error object if it is not. For example, a validator can forbid a certain name. If the input matches that name, the validator returns an error object, marking the form control invalid. Otherwise, it returns null, marking the control valid. This process repeats every time the input changes, helping Angular know if the form is ready to submit or needs fixing.