Custom validators in Angular - Mini Project: Build & Apply

Creating a Custom Validator in Angular

📖 Scenario: You are building a user registration form in Angular. You want to ensure that the username entered by the user does not contain any spaces.

🎯 Goal: Build a custom validator function called noSpaceValidator that checks if the username contains spaces and use it in an Angular reactive form control.

📋 What You'll Learn

Create a custom validator function named noSpaceValidator

The validator should return { 'noSpace': true } if the value contains spaces

Use the noSpaceValidator in a reactive form control named username

Initialize the form group with the username control using Angular's FormBuilder

💡 Why This Matters

🌍 Real World

Custom validators are used in real-world Angular apps to enforce specific input rules beyond built-in validators, such as checking for spaces, special characters, or custom formats.

💼 Career

Knowing how to write and apply custom validators is essential for Angular developers to build robust forms that meet business rules and improve user input quality.

1

Set up the reactive form with a username control

Import FormBuilder and FormGroup from @angular/forms. Create a form group called form with a control named username initialized to an empty string.

Angular

import { FormBuilder, FormGroup } from '@angular/forms';

// Create a form group with username control
// Your code here

Need a hint?

Use this.fb.group to create the form group and initialize username with an empty string.

2

Create the custom validator function noSpaceValidator

Write a function named noSpaceValidator that takes a FormControl as input and returns { noSpace: true } if the control's value contains any spaces, otherwise returns null.

Angular

import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    username: ['']
  });
}

// Create noSpaceValidator function below
// Your code here

Need a hint?

Check if control.value contains a space using indexOf(' '). Return the error object if true, else null.

3

Add the noSpaceValidator to the username control

Modify the username control in the form group to include the noSpaceValidator as a validator.

Angular

import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    username: ['', noSpaceValidator]
  });
}

function noSpaceValidator(control: FormControl) {
  return control.value && control.value.indexOf(' ') >= 0 ? { noSpace: true } : null;
}

// Add noSpaceValidator to username control above
// Your code here

Need a hint?

Pass noSpaceValidator as the second element in the array for the username control.

4

Complete the Angular component with the form and validator

Ensure the Angular component class includes the form property, the constructor with FormBuilder injection, the noSpaceValidator function, and the username control uses the validator. This completes the reactive form setup with the custom validator.

Angular

import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    username: ['', noSpaceValidator]
  });
}

function noSpaceValidator(control: FormControl) {
  return control.value && control.value.indexOf(' ') >= 0 ? { noSpace: true } : null;
}

// Finalize the component setup
// Your code here

Need a hint?

Wrap the form and validator inside an Angular component class with proper imports and decorator.