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!!
|
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..
|
