How to Use Required Validator in Angular Forms

In Angular, use the Validators.required function to make a form control mandatory. Add it to the control's validator list when creating the form with FormBuilder or FormControl. This ensures the form input cannot be empty before submission.

Syntax

The Validators.required is a built-in Angular validator that checks if a form control has a non-empty value. It is used inside the form control's validator array.

Example parts:

• formControlName: The name of the control in the form group.
• Validators.required: Marks the control as required.

typescript

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

Example

This example shows a simple Angular reactive form with one input field that uses the required validator. The form will be invalid if the input is empty, and an error message will display.

typescript

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

@Component({
  selector: 'app-required-validator',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input id="name" formControlName="name" />
      <div *ngIf="myForm.controls['name'].invalid && myForm.controls['name'].touched" style="color:red">
        Name is required.
      </div>
      <button type="submit" [disabled]="myForm.invalid">Submit</button>
    </form>
  `
})
export class RequiredValidatorComponent {
  myForm = this.fb.group({
    name: ['', Validators.required]
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    if (this.myForm.valid) {
      alert('Form submitted with name: ' + this.myForm.value.name);
    }
  }
}

Output

A form with a text input labeled 'Name'. If left empty and touched, a red message 'Name is required.' appears. The submit button is disabled until a name is entered.

Common Pitfalls

Common mistakes when using Validators.required include:

• Not adding Validators.required inside an array when combining multiple validators.
• Forgetting to check touched or dirty before showing error messages, causing errors to show immediately.
• Using Validators.required on controls that expect non-string values without proper handling.

typescript

/* Wrong: Missing array for multiple validators */
this.myForm = this.fb.group({
  email: ['', Validators.required, Validators.email] // This is incorrect
});

/* Right: Use array for multiple validators */
this.myForm = this.fb.group({
  email: ['', [Validators.required, Validators.email]]
});

Quick Reference

Summary tips for using Validators.required:

• Use inside form control initialization as Validators.required or inside an array for multiple validators.
• Check control state like touched before showing errors.
• Works with reactive forms and template-driven forms (with required attribute).

Usage	Description
Validators.required	Marks a form control as mandatory
[Validators.required, Validators.email]	Combine required with other validators
control.invalid && control.touched	Show errors only after user interaction

Key Takeaways

Use Validators.required to make a form control mandatory in Angular reactive forms.

Add Validators.required inside an array when combining with other validators.

Check control.touched or control.dirty before displaying validation messages.

The submit button should be disabled when the form is invalid to prevent empty submissions.

Validators.required works with both reactive and template-driven forms.