Published: February 15 2023

Angular + Reactive Forms - Email Validation Example

Example built with Angular 14.2.12 and Reactive Forms

This is a quick example of how to validate an email input field in Angular with Reactive Forms. For a more detailed registration form example that includes a bunch of other fields see Angular 14 - Reactive Forms Validation Example.

Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/angular-reactive-forms-email-validation)


Angular Email Validation App Component

The app component contains an example form (FormGroup) with a single string field for email. The field has a required validator and an email validator, the email validator tests that the input field contains a valid email address.

The onSubmit() method simply displays the form data in a javascript alert when the form is valid.

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

@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
    form!: FormGroup;
    submitted = false;

    constructor(private formBuilder: FormBuilder) { }

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

    // convenience getter for easy access to form fields
    get f() { return this.form.controls; }

    onSubmit() {
        this.submitted = true;

        // stop here if form is invalid
        if (this.form.invalid) {
            return;
        }

        // display form values on success
        alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.form.value, null, 4));
    }

    onReset() {
        this.submitted = false;
        this.form.reset();
    }
}


App Component Template

The app component template contains the html markup for displaying the example email validation form in the browser. The form element uses the [formGroup] directive to bind to the form FormGroup in the app component above.

A specific validation message is displayed for each validator by checking the errors object for the input field (*ngIf="f.email.errors.required" and *ngIf="f.email.errors.email").

The form binds the form submit event to the onSubmit() handler in the app component using the Angular event binding (ngSubmit)="onSubmit()". Validation messages are displayed only after the user attempts to submit the form for the first time, this is controlled with the submitted property of the app component.

The reset button click event is bound to the onReset() handler in the app component using the Angular event binding (click)="onReset()".

<div class="card m-3">
    <h5 class="card-header">Angular + Reactive Forms - Email Validation</h5>
    <div class="card-body">
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
            <div class="row">
                <div class="col mb-3">
                    <label class="form-label">Email</label>
                    <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
                    <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                        <div *ngIf="f.email.errors.required">Email is required</div>
                        <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-primary me-2">Submit</button>
                <button class="btn btn-secondary" type="reset" (click)="onReset()">Reset</button>
            </div>
        </form>
    </div>
</div>

 


Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.


Need Some Angular Help?

Search fiverr to find help quickly from experienced Angular developers.



Supported by