A webform contains many input fields like name, dob, age, email, address, etc depending on the type of business. Forms allow users to enter user data and can be submitted to post values to DB or Web Services backend. In Angular, we have predefined validators to validate the user form.
In this tutorial, two input form fields username and email are taken for demonstration. There are two types of forms in Angular: reactive and template-driven forms. The example in this tutorial uses a reactive form.
Tools and Dependencies used in this example:
- Eclipse IDE
- Bootstrap 4
- Angular 8
- Node JS
- TypeScript
Create a new app project using the Angular CLI
ng new AngularFormExample
After the project is created, modify the AppComponent TypeScript file, AppComponent HTML file, and AppModule TypeScript file with the below codes.
app.module.ts
<h1 style="padding-left:10px;">Angular Form Email Validation</h1>
<form [formGroup]="form" (ngSubmit)="submit()" style="padding-left:10px;">
<div class="form-group">
<label for="email">Email</label>
<input formControlName="email" id="email" type="text" style="width:300px;" class="form-control">
<br>
<div *ngIf="f.email.touched && f.email.invalid" class="alert alert-danger" style="width:300px;">
<div *ngIf="f.email.errors.required">Email is required.</div>
<div *ngIf="f.email.errors">Please, enter valid email address.</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Angular Reactive Form';
inputForm: FormGroup;
showData = false;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.inputForm = this.formBuilder.group({
userName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
submit() {
if (this.inputForm.status == 'VALID') {
console.log('Username : ' + this.inputForm.value.userName);
console.log('Email : ' + this.inputForm.value.email);
this.showData = true;
}
}
reset() {
this.inputForm.reset();
}
get f() {
return this.inputForm.controls;
}
}
app.component.html
<div class="container">
<h1>
{{title}}
</h1>
<form [formGroup]="inputForm" novalidate>
<div class="form-group">
<label for="userName">Username:</label>
<input class="form-control" formControlName="userName" id="userName" type="text" style="width:200px">
</div>
<div *ngIf="f.userName.invalid && (f.userName.dirty || f.userName.touched)" class="text-danger" role="alert">
<div *ngIf="f.userName.errors.required">
Username is required.
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input formControlName="email" id="email" type="text" class="form-control" style="width:200px">
<div *ngIf="f.email.touched && f.email.invalid" class="text-danger" role="alert">
<div *ngIf="f.email.errors.required">Email is required.</div>
<div *ngIf="f.email.errors.email">Please, enter a valid email address.</div>
</div>
</div>
<div class="row">
<div class="col-1">
<button type="submit"
[disabled]="inputForm.invalid || inputForm.pristine" class="btn btn-primary" (click)="submit()">
Submit
</button>
</div>
<div class="col-1">
<button type="submit" class="btn btn-primary" (click)="reset()">Reset</button>
</div>
</div>
</form>
<div *ngIf="showData" style="margin-top:20px; line-height:10px">
<p>You Entered</p>
<p>Name: {{ f.userName.value}}</p>
<p>Email: {{ f.email.value}}</p>
</div>
</div>
In Angular CLI, enter the following command to launch the Angular application
ng serve --open