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.

Practice

1. What does a custom validator function in Angular return when the input is valid?

easy

A. an empty string

B. true

C. false

D. null

Solution

1. Step 1: Understand Angular validator return values

   Angular custom validators return null when the input passes validation, meaning no errors.

2. Step 2: Identify the valid return for no errors

   Returning null signals the form control is valid, while any object means invalid.

3. Final Answer:

   null -> Option D

4. Quick Check:

   Valid input returns null [OK]

Hint: Valid inputs always return null from validators [OK]

Common Mistakes:

• Returning true or false instead of null or error object
• Returning empty string instead of null
• Confusing valid with invalid return values

2. Which of the following is the correct signature for a synchronous custom validator function in Angular?

easy

A. function myValidator(event: Event): string

B. function myValidator(control: AbstractControl): ValidationErrors | null

C. function myValidator(control: FormGroup): void

D. function myValidator(value: string): boolean

Solution

1. Step 1: Recall Angular validator function signature

   A synchronous custom validator takes an AbstractControl and returns ValidationErrors or null.

2. Step 2: Match the correct function signature

   function myValidator(control: AbstractControl): ValidationErrors | null matches the required signature exactly, others do not fit Angular patterns.

3. Final Answer:

   function myValidator(control: AbstractControl): ValidationErrors | null -> Option B

4. Quick Check:

   Validator signature = function myValidator(control: AbstractControl): ValidationErrors | null [OK]

Hint: Validator functions take AbstractControl and return errors or null [OK]

Common Mistakes:

• Using wrong parameter types like string or Event
• Returning boolean instead of error object or null
• Missing return type or returning void

3. Given this custom validator code, what will be the validation result for input value 'abc123'?

function alphaOnly(control: AbstractControl) {
  const valid = /^[a-zA-Z]+$/.test(control.value);
  return valid ? null : { alphaOnly: true };
}

medium

A. { alphaOnly: true }

B. true

C. null

D. false

Solution

1. Step 1: Analyze the regex test on input 'abc123'

   The regex /^[a-zA-Z]+$/ matches only letters. 'abc123' contains digits, so test returns false.

2. Step 2: Determine validator return value

   Since test is false, the validator returns the error object { alphaOnly: true } indicating invalid input.

3. Final Answer:

   { alphaOnly: true } -> Option A

4. Quick Check:

   Input with digits fails alphaOnly validator [OK]

Hint: Regex test false means return error object, not null [OK]

Common Mistakes:

• Assuming digits pass the regex
• Confusing true/false return values
• Expecting null for invalid input

4. Identify the error in this custom validator code snippet:

function minLengthFive(control: AbstractControl) {
  if (control.value.length < 5) {
    return { minLengthFive: true };
  }
}

medium

A. Incorrect error object key name

B. Missing return null for valid input

C. Using control.value.length without checking null

D. Validator should return boolean instead of object

Solution

1. Step 1: Check for runtime errors

   The code accesses control.value.length without checking if control.value is null or undefined, causing TypeError when value is null (common for new FormControls).

2. Step 2: Angular validator best practice

   Always check if (control.value == null) return null; before accessing properties like length. Explicit return null; for valid cases is also recommended.

3. Final Answer:

   Using control.value.length without checking null -> Option C

4. Quick Check:

   control.value can be null causing crash [OK]

Hint: Always check control.value != null before .length [OK]

Common Mistakes:

• Not checking control.value for null before .length
• Returning undefined instead of null for valid input
• Confusing error object keys with validator names

5. You want to create a custom validator that checks if a password contains at least one uppercase letter, one lowercase letter, and one digit. Which of these validator implementations correctly applies this logic?

hard

A. function passwordValidator(control: AbstractControl) {
const val = control.value || '';
const hasUpper = /[A-Z]/.test(val);
const hasLower = /[a-z]/.test(val);
const hasDigit = /\d/.test(val);
return hasUpper && hasLower && hasDigit ? null : { passwordStrength: true };
}

B. function passwordValidator(control: AbstractControl) {
if (!control.value.match(/[A-Z]/) || !control.value.match(/[a-z]/) || !control.value.match(/[0-9]/)) {
return null;
}
return { passwordStrength: true };
}

C. function passwordValidator(control: AbstractControl) {
const val = control.value;
if (val.length < 8) return { passwordStrength: true };
return null;
}

D. function passwordValidator(control: AbstractControl) {
const val = control.value;
if (val.includes(' ')) return { passwordStrength: true };
return null;
}

Solution

1. Step 1: Understand password requirements

   The password must have at least one uppercase, one lowercase, and one digit character.

2. Step 2: Analyze each option's logic

   function passwordValidator(control: AbstractControl) { const val = control.value || ''; const hasUpper = /[A-Z]/.test(val); const hasLower = /[a-z]/.test(val); const hasDigit = /\d/.test(val); return hasUpper && hasLower && hasDigit ? null : { passwordStrength: true }; } correctly tests all three conditions and returns null if all pass, error object otherwise. function passwordValidator(control: AbstractControl) { if (!control.value.match(/[A-Z]/) || !control.value.match(/[a-z]/) || !control.value.match(/[0-9]/)) { return null; } return { passwordStrength: true }; } reverses logic, returning null on failure. The remaining options check unrelated conditions.

3. Final Answer:

   function passwordValidator(control: AbstractControl) { const val = control.value || ''; const hasUpper = /[A-Z]/.test(val); const hasLower = /[a-z]/.test(val); const hasDigit = /\d/.test(val); return hasUpper && hasLower && hasDigit ? null : { passwordStrength: true }; } -> Option A

4. Quick Check:

   All conditions true returns null, else error [OK]

Hint: Return null only if all conditions are met, else error [OK]

Common Mistakes:

• Returning null on invalid input
• Checking only length or spaces, not required chars
• Mixing up logic conditions in if statements