[Solved] Identify the issue in this custom validator code snippet: function maxLengthValidator(control: AbstractControl): ValidationErrors | null { if (control.value.length > 10) { return { maxLength: true };... | Angular

Angular - Reactive Forms

Identify the issue in this custom validator code snippet:

function maxLengthValidator(control: AbstractControl): ValidationErrors | null {
  if (control.value.length > 10) {
    return { maxLength: true };
  }
}

AThe validator should throw an error instead of returning an object

BThe error object key should be 'maxLengthExceeded' instead of 'maxLength'

CThe function should return a boolean instead of an object

DThe function does not return null when the input is valid

Step-by-Step Solution

Solution:

Step 1: Check return values
A custom validator must return null if the input is valid.
Step 2: Analyze the code
If control.value.length > 10, it returns an error object.
Otherwise, it returns nothing (undefined).
Step 3: Identify the problem
Not returning null explicitly when valid causes Angular to treat the validator as invalid or inconsistent.
Final Answer:
The function does not return null when the input is valid -> Option D
Quick Check:
Always return null if valid [OK]

Quick Trick: Always return null if valid [OK]

Common Mistakes:

MISTAKES

Omitting return null for valid inputs
Returning boolean instead of ValidationErrors or null
Using incorrect error object keys

Master "Reactive Forms" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Identify the issue in this custom validator code snippet:

Step 1: Check return values

Step 2: Analyze the code

Step 3: Identify the problem

Final Answer:

Quick Check:

Want More Practice?