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
}

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
}

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
}

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
  
  

Hint

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

Practice

1. Which Angular validator ensures a form control is not left empty?

easy

A. Validators.pattern

B. Validators.minLength

C. Validators.required

D. Validators.maxLength

Solution

1. Step 1: Understand the purpose of Validators.required

   This validator checks if the input field has any value and marks it invalid if empty.

2. Step 2: Compare with other validators

   minLength checks length, pattern checks format, and maxLength limits length, but none enforce non-empty input.

3. Final Answer:

   Validators.required -> Option C

4. Quick Check:

   Non-empty input = Validators.required [OK]

Hint: Required means input cannot be empty [OK]

Common Mistakes:

• Confusing required with minLength
• Using pattern to check empty input
• Thinking maxLength enforces presence

2. Which is the correct syntax to apply a minimum length validator of 5 characters in Angular?

easy

A. Validators.minLength(5)

B. Validators.minlength = 5

C. Validators.minLength: 5

D. Validators.minLength[5]

Solution

1. Step 1: Recall Angular validator syntax

   Validators like minLength are functions called with the required parameter in parentheses.

2. Step 2: Identify correct function call

   Validators.minLength(5) correctly calls the function with 5 as argument; other options use invalid syntax.

3. Final Answer:

   Validators.minLength(5) -> Option A

4. Quick Check:

   Function call with parentheses = Validators.minLength(5) [OK]

Hint: Validators are functions called with parameters in parentheses [OK]

Common Mistakes:

• Using assignment (=) instead of function call
• Using colon (:) instead of parentheses
• Using brackets [] incorrectly

3. Given this form control:

new FormControl('', [Validators.required, Validators.minLength(3)])

What will be the validation status if the user enters 'Hi'?

medium

A. Valid

B. Invalid because input is empty

C. Invalid because input does not match pattern

D. Invalid because input length is less than 3

Solution

1. Step 1: Check input against Validators.required

   The input 'Hi' is not empty, so the required validator passes.

2. Step 2: Check input length against Validators.minLength(3)

   'Hi' has length 2, which is less than 3, so minLength validator fails.

3. Final Answer:

   Invalid because input length is less than 3 -> Option D

4. Quick Check:

   Length 2 < 3 = Invalid minLength [OK]

Hint: Check required first, then minLength [OK]

Common Mistakes:

• Assuming 'Hi' is valid because not empty
• Ignoring minLength validator
• Confusing pattern validator presence

4. Identify the error in this Angular form control validator setup:

new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z]+'))

medium

A. Missing closing parenthesis for Validators.pattern

B. Pattern string should be a RegExp object, not a string

C. Validators.required cannot be combined with Validators.pattern

D. No error, this setup is correct

Solution

1. Step 1: Check syntax of Validators.pattern

   The pattern validator call has an opening parenthesis but is missing the closing parenthesis at the end.

2. Step 2: Verify other options

   Pattern can accept a string, and required can be combined with pattern, so options B and C are incorrect.

3. Final Answer:

   Missing closing parenthesis for Validators.pattern -> Option A

4. Quick Check:

   Unmatched parentheses cause syntax error [OK]

Hint: Count parentheses carefully in validator calls [OK]

Common Mistakes:

• Forgetting closing parenthesis
• Thinking pattern needs RegExp object only
• Believing required and pattern can't combine

5. You want a form control that requires input with at least 4 characters and only digits. Which validator setup is correct?

hard

A. [Validators.minLength(4), Validators.pattern('^[0-9]+$')]

B. [Validators.required, Validators.minLength(4), Validators.pattern('^[0-9]+$')]

C. [Validators.required, Validators.minLength(4), Validators.pattern('[a-zA-Z]+')]

D. [Validators.required, Validators.pattern('^[0-9]+$')]

Solution

1. Step 1: Check required presence

   The input must not be empty, so Validators.required is needed.

2. Step 2: Check length and pattern validators

   Validators.minLength(4) ensures at least 4 characters, and Validators.pattern('^[0-9]+$') ensures only digits.

3. Step 3: Evaluate other options

   [Validators.required, Validators.minLength(4), Validators.pattern('[a-zA-Z]+')] uses letters pattern, [Validators.minLength(4), Validators.pattern('^[0-9]+$')] misses required, [Validators.required, Validators.pattern('^[0-9]+$')] misses minLength(4).

4. Final Answer:

   [Validators.required, Validators.minLength(4), Validators.pattern('^[0-9]+$')] -> Option B

5. Quick Check:

   Required + minLength + digit pattern = [Validators.required, Validators.minLength(4), Validators.pattern('^[0-9]+$')] [OK]

Hint: Combine required, minLength, and digit pattern for digits only [OK]

Common Mistakes:

• Using letter pattern instead of digit pattern
• Omitting required validator
• Relying only on pattern for length