Implement Required Field and Email Validation in Angular Forms

The Code Points March 23, 2025 0

When building web applications with Angular, one of the most important aspects of user experience is form validation. Ensuring that users provide the correct information is essential for a smooth and secure experience. In this article, we’ll explore how to implement required field validation and email validation using Angular’s powerful form handling capabilities.

Why is Form Validation Important in Angular?

Form validation in Angular ensures that the data entered by users meets the required criteria before being submitted to the server. It helps in:

• Preventing incorrect or incomplete data submissions.
• Improving data integrity and security.
• Enhancing user experience by providing immediate feedback on form inputs.

Angular provides two main ways to handle form validation: Reactive Forms and Template-driven Forms. Both approaches offer robust validation mechanisms, but here we'll focus on how to implement required field and email validation in both approaches.

Setting Up Angular Forms

Before diving into validations, let’s set up an Angular form. Depending on your use case, you can choose either a template-driven form or a reactive form.

1. Template-Driven Forms

Template-driven forms are simple to set up and ideal for simple forms. They are defined in the template using ngModel and Angular directives like required or email.

Example of Template-Driven Form:

<form #userForm="ngForm" (ngSubmit)="submitForm(userForm)">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" ngModel required email>

  <div *ngIf="userForm.controls.email?.invalid && userForm.controls.email?.touched">
    <p *ngIf="userForm.controls.email?.errors?.['required']">Email is required</p>
    <p *ngIf="userForm.controls.email?.errors?.['email']">Enter a valid email address</p>
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

In this example:

• Required validation: The required directive ensures that the email field cannot be left empty.
• Email validation: The email directive checks that the entered value matches the email format.

2. Reactive Forms

Reactive forms provide more control and flexibility. They are defined in the component class, which allows for easier programmatic validation.

Example of Reactive Form:

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.userForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }

  submitForm() {
    if (this.userForm.valid) {
      console.log('Form Submitted!', this.userForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

<form [formGroup]="userForm" (ngSubmit)="submitForm()">
  <label for="email">Email</label>
  <input type="email" id="email" formControlName="email">

  <div *ngIf="userForm.controls.email?.invalid && userForm.controls.email?.touched">
    <p *ngIf="userForm.controls.email?.errors?.['required']">Email is required</p>
    <p *ngIf="userForm.controls.email?.errors?.['email']">Enter a valid email address</p>
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

In the reactive form example:

• Required validation: The Validators.required ensures that the email field is not empty.
• Email validation: The Validators.email ensures the email matches the standard email pattern.

Custom Validation for Email and Required Fields

While Angular provides built-in validators like required and email, you may want to create custom validation logic in certain cases. Here's how you can implement a custom email validator.

Custom Email Validator:

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function customEmailValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    const valid = emailPattern.test(control.value);
    return valid ? null : { 'invalidEmail': { value: control.value } };
  };
}

Then, use it in your reactive form:

this.userForm = this.fb.group({
  email: ['', [Validators.required, customEmailValidator()]]
});

Form Validation Feedback

Providing clear and immediate feedback to users is crucial. Use Angular’s form control properties such as invalid, touched, and dirty to display validation error messages. This gives users real-time feedback on the data they enter.

<div *ngIf="userForm.controls.email?.invalid && userForm.controls.email?.touched">
  <p *ngIf="userForm.controls.email?.errors?.['required']">Email is required</p>
  <p *ngIf="userForm.controls.email?.errors?.['email']">Enter a valid email address</p>
</div>

In this example:

• Required field validation: Displays an error message if the email field is left empty.
• Email validation: Displays a message if the entered value is not a valid email format.

Best Practices for Form Validation in Angular

• Use built-in validators: Angular provides a set of validators like required, email, and minLength that can be used to handle most validation scenarios.
• Leverage custom validators: For complex validation rules (such as checking email format or password strength), create your own custom validators.
• Display error messages: Use conditional rendering to display appropriate error messages and guide the user.
• Disable the submit button: Only allow form submission when the form is valid, preventing incorrect data from being submitted.

Conclusion

Implementing required field and email validation in Angular forms helps improve the user experience by guiding them to provide the correct data. Whether you choose template-driven or reactive forms, Angular makes it easy to validate user inputs efficiently.

By mastering Angular’s validation capabilities, you can ensure that your forms are both user-friendly and secure, ultimately leading to better-quality data submission and fewer errors.

Happy coding!