Angular 4 has a built-in email validation tag that
can be added within the input fields and only will need to set the email
validation error (with a custom message), if not a valid email address.
We can also use the custom regular expression like
[Validators.pattern("[^ @]*@[^ @]*")] to validate an email or other
stuff also.
Email_RegExp =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
Syntax
– Built-in Email Validation Tags
<input
type="email"
ng-model="string"
[name="string"]
[required="string"]
[ng-required="string"]
[ng-minlength="number"]
[ng-maxlength="number"]
[pattern="string"]
[ng-pattern="string"]
[ng-change="string"]>
Angular Module -
//NgModule
@NgModule({
imports: [BrowserModule,
ReactiveFormsModule],
declarations: [App],
bootstrap: [App]
})
export
class AppModule
{}
Email
HTML Template -
//Email template
<form [formGroup]="myForm"
(ngSubmit)="onSubmit(f.value)">
<label>Email
</label>
<input
formControlName="email"
><br/>
<span *ngIf="myForm.hasError('email',
'email')" style="color:red;">
Please enter the correct email or valid email.
</span>
</form>
Use Of FormGroup and
FormControl -
//Using FormGroup and FormControl
export
class App
{
fGroup: FormGroup;
emailCtrl: FormControl;
constructor(private
fBuilder: FormBuilder)
{
this.fGroup
= fBuilder.group({
UserFName: ['',
Validators.required],
UserLastName:
['', Validators.required],
AboutUser:
['', Validators.required],
email:
['', Validators.email]
});
}
}
Example
in Detail –
import
{Component, NgModule}
from '@angular/core'
import
{BrowserModule} from
'@angular/platform-browser'
import
{ FormBuilder, FormGroup,
Validators, FormControl
} from '@angular/forms';
import
{ FormsModule, ReactiveFormsModule
} from '@angular/forms';
@Component({
selector: 'my-app',
template: `<form [formGroup]="fGroup"
(ngSubmit)="onSubmit(f.value)">
<label>Email </label>
<input formControlName="email" ><br/>
<span *ngIf="fGroup.hasError('email',
'email')" style="color:red;">
Please enter the correct email or valid email.
</span>
</form>`,
})
export
class App
{
fGroup: FormGroup;
emailCtrl: FormControl;
constructor(private
fBuilder: FormBuilder)
{
this.fGroup
= fBuilder.group({
UserFName: ['',
Validators.required],
UserLastName:
['', Validators.required],
AboutUser:
['', Validators.required],
email:
['', Validators.email]
});
}
}
@NgModule({
imports: [ BrowserModule,
ReactiveFormsModule
],
declarations: [ App
],
bootstrap: [ App
]
})
export
class AppModule
{}
Result looks like –
Example
2
–
Model Driven Form Validation -
class
FormComponent implements
OnInit {
fGroup: FormGroup;
ngOnInit() {
fGroup = new
FormGroup({
User_Name:
new FormGroup({
First_Name:
new FormControl('',
Validators.required),
Last_Name:
new FormControl('',
Validators.required),
}),
Email:
new FormControl('',
[Validators.required,Validators.pattern("[^
@]*@[^ @]*")]),
Password:
new FormControl('',
[Validators.minLength(6),
Validators.required])
});
}
}
Result
looks like - http://embed.plnkr.co/QbMNBDrffGKHbHjG6GMa/
I hope you are enjoying with this post!
Please share with you friends!! Thank you!!