Custom validators in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a custom validator returns null?

In Angular, a custom validator function returns null. What does this mean for the form control's validity?

Angular

function myValidator(control: AbstractControl): ValidationErrors | null {
  return null;
}

A The control is valid because null means no errors.

B The control is invalid because null means an error occurred.

C The control's value is reset to empty.

D The validator is ignored and does not run.

💡 Hint

Think about what Angular expects from a validator when there are no problems.

In Angular, a validator returns null to indicate the control is valid. Any object returned means errors.

📝 Syntax

intermediate

Identify the correct custom validator syntax

Which of the following is the correct way to write a synchronous custom validator function in Angular?

A function myValidator(control: AbstractControl): boolean { return control.value.length > 3; }

B function myValidator(control: AbstractControl) { if (control.value.length > 3) return null; else return { tooShort: true }; }

C function myValidator(control: AbstractControl): ValidationErrors | null { return control.value.length > 3 ? null : { tooShort: true }; }

D function myValidator(control: AbstractControl): string | null { return control.value.length > 3 ? 'valid' : null; }

💡 Hint

Check the return type and syntax carefully.

A custom validator must return null if valid or an object with error info if invalid. Option C follows this pattern correctly.

❓ state_output

advanced

What is the validation state after applying this custom validator?

Given this custom validator and a form control with value 'abc', what is the control's errors property after validation?

Angular

function startsWithAValidator(control: AbstractControl): ValidationErrors | null {
  return control.value.startsWith('A') ? null : { startsWithA: true };
}

const control = new FormControl('abc', startsWithAValidator);
const errors = control.errors;

A null

B { startsWithA: true }

C { required: true }

D undefined

💡 Hint

Check if the string 'abc' starts with 'A'.

The value 'abc' does not start with 'A', so the validator returns the error object { startsWithA: true }. This sets the control's errors property.

🔧 Debug

advanced

Why does this custom validator cause a runtime error?

This custom validator throws an error when the form control value is empty. Why?

Angular

function positiveNumberValidator(control: AbstractControl): ValidationErrors | null {
  if (control.value == null || control.value <= 0) {
    return { notPositive: true };
  }
  return null;
}

A Because the validator must return a Promise, not null or object.

B Because the validator must check control.valid instead of control.value.

C Because the function is missing a return statement.

D Because control.value can be null or undefined, and comparing with <= causes an error.

💡 Hint

Think about what happens if control.value is empty or missing.

If control.value is null or undefined, the comparison control.value <= 0 throws a runtime error because you cannot compare null/undefined with a number.

🧠 Conceptual

expert

How to create a reusable parameterized custom validator?

You want to create a custom validator that checks if a control's value length is at least a minimum number, passed as a parameter. Which approach correctly creates this reusable validator?

A

function minLengthValidator(min: number): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    return control.value.length >= min ? null : { minLength: { requiredLength: min, actualLength: control.value.length } };
  };
}

B

function minLengthValidator(control: AbstractControl, min: number): ValidationErrors | null {
  return control.value.length >= min ? null : { minLength: { requiredLength: min, actualLength: control.value.length } };
}

C

const minLengthValidator = (min: number, control: AbstractControl): ValidationErrors | null => {
  return control.value.length >= min ? null : { minLength: { requiredLength: min, actualLength: control.value.length } };
};

D

function minLengthValidator(min: number): ValidationErrors {
  if (control.value.length < min) {
    return { minLength: true };
  }
  return null;
}

💡 Hint

Remember Angular expects a function returning a validator function for parameterized validators.

Option A correctly returns a function that takes a control and returns errors or null. This pattern allows passing parameters to the validator.