Validators (required, minLength, pattern) in Angular - Mini Project: Build & Apply

Form Validation with Required, minLength, and pattern Validators in Angular

📖 Scenario: You are building a simple user registration form for a website. The form needs to collect a username, password, and email address. To make sure users enter valid information, you will add validation rules.

🎯 Goal: Create an Angular standalone component with a form that uses required, minLength, and pattern validators to check the username, password, and email fields.

📋 What You'll Learn

Create a reactive form with three controls: username, password, and email

Add Validators.required to all three controls

Add Validators.minLength(5) to the password control

Add Validators.pattern to the email control to validate a basic email format

Use Angular's FormBuilder to create the form

Display validation error messages below each input when invalid

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Validating user input helps prevent errors and improves user experience.

💼 Career

Understanding Angular form validation is essential for frontend developers building interactive and user-friendly web applications.

1

Set up the form controls with initial values

Create a reactive form called registrationForm using FormBuilder with three controls: username, password, and email. Initialize all controls with empty strings ''.

Angular

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-registration',
  standalone: true,
  templateUrl: './registration.component.html',
  imports: []
})
export class RegistrationComponent {
  constructor(private fb: FormBuilder) {}

  // Create registrationForm with username, password, email controls initialized to ''
  // Your code here
}

Need a hint?

Use this.fb.group to create the form group with controls initialized to empty strings.

2

Add required validators to all controls

Add Validators.required to the username, password, and email controls inside the registrationForm.

Angular

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-registration',
  standalone: true,
  templateUrl: './registration.component.html',
  imports: []
})
export class RegistrationComponent {
  constructor(private fb: FormBuilder) {}

  registrationForm = this.fb.group({
    username: ['', [Validators.required]],
    password: ['', [Validators.required]],
    email: ['', [Validators.required]]
  });
  // Your code here
}

Need a hint?

Import Validators from @angular/forms and add Validators.required inside an array as the second argument for each control.

3

Add minLength and pattern validators

Add Validators.minLength(5) to the password control validators array. Add Validators.pattern with the regex /^[\w.-]+@[\w.-]+\.\w{2,4}$/ to the email control validators array inside registrationForm.

Angular

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-registration',
  standalone: true,
  templateUrl: './registration.component.html',
  imports: []
})
export class RegistrationComponent {
  constructor(private fb: FormBuilder) {}

  registrationForm = this.fb.group({
    username: ['', [Validators.required]],
    password: ['', [Validators.required, Validators.minLength(5)]],
    email: ['', [Validators.required, Validators.pattern(/^[\w.-]+@[\w.-]+\.\w{2,4}$/)]]
  });
  // Your code here
}

Need a hint?

Add Validators.minLength(5) to the password validators array. Add Validators.pattern with the email regex to the email validators array.

4

Add validation messages in the template

In the component's template, add input fields bound to registrationForm.controls.username, registrationForm.controls.password, and registrationForm.controls.email. Below each input, add <div> elements that show error messages when the control is invalid and touched. For example, show "Username is required" if username is invalid and touched. Similarly, show "Password is required" and "Password must be at least 5 characters" for password. For email, show "Email is required" and "Email format is invalid" messages accordingly.

Angular

  Username
  
  

  Password
  
  

  Email
  
  

Need a hint?

Use Angular's *ngIf directive to show error messages only when the control is touched and invalid. Use aria-describedby for accessibility.