Angular + Template-Driven Forms - Email Validation Example
Example built with Angular 15.1.5 and Template-Driven Forms
This is a quick example of how to validate an email input field in Angular with Template-Driven Forms. For a more detailed registration form example that includes a bunch of other fields see Angular 14 - Template-Driven Form Validation Example.
Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/angular-template-driven-forms-email-validation)
Component Template with Email Validation
The app component template contains an example form with a single input field for email. The field has the required and email validator directives, the email validator tests that the input field contains a valid email address.
The form submit event is bound to the onSubmit() method of the app component with the event binding (ngSubmit)="onSubmit(f)". The template variable #f="ngForm" creates a FormGroup instance to provide access to the form data and validation status in the app component.
Validators and directives in template-driven forms
Validation is implemented by validator functions that are attached to fields using directives in template-driven forms. The required and email validators are both included as part of the Angular framework.
Input fields registered with parent form
The email input field is registered with the form using the ngModel directive. In the context of a parent form the directive can be used without data binding ([()]), instead the control is registered using the input name attribute and the form keeps the data in sync.
<div class="card m-3">
<h5 class="card-header text-center">Angular + Template-Driven Forms - Email Validation Example</h5>
<div class="card-body">
<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<div class="row">
<div class="col mb-3">
<label class="form-label">Email</label>
<input type="text" name="email" ngModel #email="ngModel" class="form-control" [ngClass]="{ 'is-invalid': f.submitted && email.invalid }" required email>
<div *ngIf="f.submitted && email.errors" class="invalid-feedback">
<div *ngIf="email.errors.required">Email is required</div>
<div *ngIf="email.errors.email">Email must be a valid email address</div>
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary me-1">Submit</button>
<button class="btn btn-secondary" type="reset">Reset</button>
</div>
</form>
</div>
</div>
App Component that handles Form Data
The component doesn't do much when using angular template-driven forms because form fields and validators are configured in the component template.
The onSubmit() method is called with the NgForm template variable when the form is submitted, it is bound to the form element in the template using Angular event binding syntax ((ngSubmit)="onSubmit(f)"). If the form is valid a simple javascript alert is displayed with the values entered.
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({ selector: 'app-root', templateUrl: 'app.component.html' })
export class AppComponent {
onSubmit(f: NgForm) {
// stop here if form is invalid
if (f.invalid) {
return;
}
alert('SUCCESS!! :-)\n\n' + JSON.stringify(f.value, null, 4));
}
}
Need Some Angular Help?
Search fiverr for freelance Angular developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!