In this post, you will learn about ngMessages directive in angularJs and how it can help to show error messages in your application. ngMessages provides custom form validation facility to display error messages in angularJs.
Let’s start with an example to see how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>form validation demo with ngMessages</title>
</head>
<body ng-app=myapp">
<script src="path/to/angular.min.js"></script>
<script src="path/to/angular-messages.min.js"></script>
<script>
var myapp = angular.module(myapp', ['ngMessages']);
</script>
</body>
</html>
In the above template, you can see that we have included angular file and angular-messages file. Then we have injected ngMessages as a dependency in our module.
Next, we will create a form with different fields:
<form name=myForm" class=validForm" required>
<label>First Name:</label>
<input type="text" name="FirstName" ng-model="firstName" required />
<label>Last Name:</label>
<input type="text" name="LastName" ng-model="lastName" required />
<label>Phone Number:</label>
<input type="email" name="PhoneNumber" ng-model="phoneNumber" required />
<label>Email Address:</label>
<input type="email" name="Email" ng-model="email" required />
<label>Address:</label>
<textarea type="text" name="userAddress ng-model=address required></textarea>
</form>
In this form, we have added required attribute to all the elements and also using ng-model to bind the element to scope.
Now, Let’s check how ngMessages will allow you to use attributes of inputs for form validation. we will use ng-messages directive to evaluate a key-value object. Here it will be the form name binded to the name attribute of input field binded to the $error object. Then we will add ng-messages directive to a div element. Inside this div we will add other div element containing ng-message attribute and the value of that attribute will be the value that is passed to the input fields i.e. required.
you can add the ng-if=“myForm.inputName.$dirty after the ng-messages directive in the div element. It will hide the error message until the field is touched.
<label>First Name:</label>
<input type="text" name="FirstName" ng-model="firstName" required />
<div ng-messages=myForm.FirstName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Last Name:</label>
<input type="text" name="LastName" ng-model="lastName" required />
<div ng-messages=myForm.LastName.$error">
<div ng-message="required">This field is required</div>
</div>
You can also use other directives that are useful for validating input fields like email address, phone number.
These are:
ng-pattern, ng-minlength, ng-maxlength. ng-pattern is used to check some regular expression for particular field and is passed to the particular input field. The error message will display by passing pattern into ng-message.
<label>Mobile Number:</label>
<input name=mobileNumber" ng-model="Number"
ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/"
required/>
<div ng-messages=myForm.mobileNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
If you want to display some error message when minlength or maxlength of text exceeds, you can use the ng-minlength and ng-maxlength attribute in the input field. To show the error message, you just need to pass the value into ng-message attribute inside the ng-message div like the following:
<label>Message</label>
<textarea type="text" name="Message" ng-model="message"
ng-minlength="150" ng-maxlength=900" required>
</textarea>
<div ng-messages=myForm.Message.$error">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 150 characters</div>
<div ng-message="maxlength">Message must not exceed 900 characters</div>
</div>
You can check the demo here
Hope this will help you to understand the validation using ngMessages.
0 Comment(s)