Email validation in angular material mdchips
Posted By : Milind Ahuja | 22-May-2016
Md-chips is an angular directive for building list of strings, commonly used as input type fields for email addresses. The strings typed in input field are displayed as chips.
More on md-chips you can find here in the following link:
https://material.angularjs.org/latest/demo/chips
In this Blog, I am going to show the way to validate email, if the format given email address is valid or not. There is a different way to do this if you are using md-chips than in the normal input fields where you can just do it easily with the help of ng-pattern.
Here is the HTML code and the controller which does the work for you:
HTML:
<div layout="column" ng-cloak="" ng-controller="MyCtrl as ctrl">
Invite via Email
JS:
$scope.validateEmail = function() {
var emailValue = angular.element(".md-input").val();
var reg = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
if (reg.test(emailValue)) {
$scope.isEmailValid = true;
} else {
$scope.isEmailValid = false;
}
};
EXPLANATION:
By using the input field's class md-input which is internally generated by md-chips, you can compare the given email address with your pattern/format which is in the variable reg. If it matches, success fuction will be called, otherwise you can show the error toastr to let the user know that the given email address is invalid or doesn't exists.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.