Validators (required, minLength, pattern) in Angular

Introduction

Validators help check if the user typed the right kind of information in a form. They make sure the form is filled out correctly before sending it.

When you want to make sure a user does not leave a form field empty.

When you want to require a minimum number of characters in a text input.

When you want to check if the input matches a specific pattern, like an email or phone number.

When you want to give users instant feedback about mistakes in their form entries.

When you want to prevent submitting a form with invalid or incomplete data.

Syntax

Angular

import { Validators } from '@angular/forms';

this.myForm = new FormGroup({
  name: new FormControl('', [Validators.required, Validators.minLength(3), Validators.pattern('^[a-zA-Z]+$')])
});

Validators.required checks if the field is not empty.

Validators.minLength(n) checks if the input has at least n characters.

Validators.pattern(regex) checks if the input matches the given regular expression.

Examples

This control must have a value; it cannot be empty.

Angular

new FormControl('', Validators.required)

This control requires at least 5 characters typed in.

Angular

new FormControl('', Validators.minLength(5))

This control only accepts numbers (digits) as input.

Angular

new FormControl('', Validators.pattern('^[0-9]+$'))

This control must not be empty, must have at least 4 lowercase letters, and no other characters.

Angular

new FormControl('', [Validators.required, Validators.minLength(4), Validators.pattern('^[a-z]+$')])

Sample Program

This Angular component creates a simple form with one input for username. It uses three validators: required, minLength(3), and pattern to allow only letters. It shows error messages below the input if the user input is invalid. The submit button is disabled until the form is valid.

Angular

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

@Component({
  selector: 'app-simple-form',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="submit()">
      <label for="username">Username:</label>
      <input id="username" formControlName="username" aria-describedby="usernameHelp" />
      <div id="usernameHelp" *ngIf="username.invalid && (username.dirty || username.touched)" style="color: red;">
        <div *ngIf="username.errors?.required">Username is required.</div>
        <div *ngIf="username.errors?.minlength">Username must be at least 3 characters.</div>
        <div *ngIf="username.errors?.pattern">Username must contain only letters.</div>
      </div>
      <button type="submit" [disabled]="userForm.invalid">Submit</button>
    </form>
  `
})
export class SimpleFormComponent {
  userForm = new FormGroup({
    username: new FormControl('', [
      Validators.required,
      Validators.minLength(3),
      Validators.pattern('^[a-zA-Z]+$')
    ])
  });

  get username() {
    return this.userForm.get('username')!;
  }

  submit() {
    if (this.userForm.valid) {
      alert('Form submitted with username: ' + this.username.value);
    }
  }
}

Important Notes

Use Validators.compose to combine multiple validators if needed, but passing an array works well.

Angular runs validators automatically when the user types or changes the input.

Always provide user-friendly error messages to help fix mistakes.

Summary

Validators check user input to keep forms correct and complete.

Use required, minLength, and pattern to cover common validation needs.

Show clear error messages and disable submit until the form is valid.

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