In this article, I will show you how to setup form validation in Angular 6. Also, I am
using a simple registration form with standard fields –
1.
Name
2.
Email
3.
Gender
4.
Country
5.
Site URL
6.
Password
All fields are required, plus the email field must be a
valid email address, site URL field must be a valid URL and the password field
must have a min-length of 6.
Steps involved as following –
1.
Create a project with the help of CLI command
– ng g new Project_Name
2.
Go to the created project directory
3.
Create customer components with the help of
CLI command – ng g component comp_name
4.
Import the FormsModule, RouterModule,
CustomerComponent, routing for navigating add customer page in the NgModule.
5.
Finally come to app.module.ts
6.
Result
The following Examples as–
Create a project
ng g
new ng6FormValidation
Create customer components –
customer.component.ts –
import
{ Component, OnInit
} from '@angular/core';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export
class CustomerComponent
implements OnInit
{
model: any
= {};
countries : any;
constructor() {
}
ngOnInit() {
//Get country list.
this.countries
=[
{"id" :1,
"name":
"India",
"code":"IN"},
{"id" :2,
"name":
"Nepal",
"code":"NP"},
{"id" :3,
"name":
"United Arab Emirates",
"code":
"AE"},
{"id" :4,
"name":
"United Kingdom",
"code":
"GB"},
{"id" :5,
"name":
"United States",
"code":
"US"},
{"id" :6,
"name":
"Australia",
"code":
"AU"},
{"id" :7,
"name":
"Austria",
"code":
"AT"},
{"id" :8,
"name":
"Canada",
"code":
"CA"},
{"id" :9,
"name":
"China",
"code":
"CN"},
];
//Default
selected country Id.
//this.model.country = 5;
}
public onSubmitCustomer()
{
alert('Your
information has been submitted successfully. :-)\n\n'
+ JSON.stringify(this.model))
}
}
And customer.component.html –
<h1>Register
Customer</h1>
<hr>
<form
name="form"
(ngSubmit)="f.form.valid
&&
onSubmitCustomer()" #f="ngForm"
novalidate>
<div
class="container">
<label
for="name"><b>Emp
Name</b></label>
<input
type="text"
placeholder="Enter
Name" name="name"
[(ngModel)]="model.name"
#name="ngModel"
[ngClass]="{
'is-invalid': f.submitted &&
name.invalid }" required>
<div
*ngIf="f.submitted
&& name.invalid"
class="invalid-text">
<div
*ngIf="name.errors.required">Name
is required</div>
</div>
<label
for="email"><b>Email</b></label>
<input
type="text"
placeholder="Enter
Email" name="email"
[(ngModel)]="model.email"
#email="ngModel"
[ngClass]="{
'is-invalid': f.submitted &&
email.invalid }" required
email>
<div
*ngIf="f.submitted
&&
email.invalid" class="invalid-text">
<div
*ngIf="email.errors.required">Email
is required</div>
<div
*ngIf="email.errors.email">Email
must be a valid email address</div>
</div>
<label
for="gender"><b>Gender</b></label>
<select
placeholder="Select
Gender" name="gender"
[(ngModel)]="model.gender"
#gender="ngModel"
[ngClass]="{
'is-invalid': f.submitted &&
gender.invalid }" required>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<div
*ngIf="f.submitted
&&
gender.invalid" class="invalid-text">
<div
*ngIf="gender.errors.required">Gender
is required</div>
</div>
<br>
<label
for="country"><b>Country</b></label>
<select
placeholder="Select
country" name="country"
[(ngModel)]="model.country"
#country="ngModel"
[ngClass]="{
'is-invalid': f.submitted &&
country.invalid }" required>
<option
*ngFor="let
country of countries" [value]="country.id">
{{country.name}}</option>
</select>
<div
*ngIf="f.submitted
&&
country.invalid" class="invalid-text">
<div
*ngIf="country.errors.required">Country
is required</div>
</div>
<br>
<label
for="site"><b>Site
URL</b></label>
<input
type="url"
placeholder="Enter
site URL" name="site"
pattern="https?://.+"
[(ngModel)] ="model.site"
#site="ngModel"
[ngClass]="{
'is-invalid': f.submitted &&
site.invalid }"
required url>
<div
*ngIf="f.submitted
&& site.invalid"
class="invalid-text">
<div
*ngIf="site.errors.required">Site
is required</div>
<div
*ngIf="site.errors.pattern">Must
be a valid site URL</div>
</div>
<label
for="psw-repeat"><b>Password</b></label>
<input
type="password"
placeholder="Password"
name="pwd"
[(ngModel)]="model.pwd"
#pwd="ngModel"
[ngClass]="{
'is-invalid': f.submitted &&
pwd.invalid }" required
minlength="6">
<div
*ngIf="f.submitted
&& pwd.invalid"
class="invalid-text">
<div
*ngIf="pwd.errors.required">Password
is required</div>
<div
*ngIf="pwd.errors.minlength">Password
must be at least 6 characters</div>
</div>
<hr>
<p>By
creating an account you agree to our <a
href="#">Terms
& Privacy</a>.</p>
<button
type="submit"
class="registerbtn">Register</button>
</div>
<div
class="container
signin">
<p>Already
has an account? <a
href="#">Sign
in</a>.</p>
</div>
</form>
Import the FormsModule, RouterModule,
CustomerComponent, routing for navigate add customer page in the NgModule. Now
the NgModule looks like.
import
{ BrowserModule } from
'@angular/platform-browser';
import
{ NgModule } from
'@angular/core';
import
{FormsModule} from
'@angular/forms';
import
{RouterModule} from
'@angular/router';
import
{ AppComponent } from
'./app.component';
import
{ CustomerComponent
} from './customer/customer.component';
@NgModule({
declarations: [
AppComponent,
CustomerComponent
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([{
path:'customer-link',
component:CustomerComponent
}
])
],
providers: [],
bootstrap: [AppComponent]
})
export
class AppModule
{ }
Result looks like –
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
![Angular 6 Forms Validation Example - [Required, Email, URL, Dropdown and Min-Max min-length]](https://2.bp.blogspot.com/-x37jMz5qQFE/W1hN3MdMgbI/AAAAAAAAS0k/mmnEnUjQHTkTtr8ULjtDfPAcyANDzyoQQCLcBGAs/s72-c/angular%2B6%2Bform%2Bvalidation%2Bwith%2Bemail%2Bsite%2Burl%2Bdropdown.gif)