Handling Errors in Forms with ng-messages in AngularJS

Form validation is crucial for a seamless user experience and data integrity. While ng-show and ng-if can be used to display validation messages, AngularJS provides a more efficient way to handle errors using the ng-messages module.

ng-messages helps in managing and displaying multiple validation messages in a structured and optimized way. It is a part of the ngMessages module, which must be included in your AngularJS application.

---

Topics Covered

1. What is ng-messages?
2. Setting Up ng-messages in AngularJS
3. Using ng-messages for Error Handling
4. Customizing Error Messages
5. Displaying Messages Dynamically
6. Using ng-messages-include for Reusability
7. Styling Errors with CSS
8. Best Practices
9. Conclusion

---

1. What is ng-messages?

ng-messages is a directive in AngularJS that simplifies form validation error handling.
It allows multiple error messages to be displayed dynamically based on the input’s validation state.
It works efficiently by rendering only the first applicable message instead of multiple error messages at once.

---

2. Setting Up ng-messages in AngularJS

Before using ng-messages, you must include the ngMessages module in your AngularJS application.

Step 1: Include angular-messages.js

If you are using a CDN, add:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.js"></script>

Step 2: Add ngMessages Dependency

In your AngularJS app module, include ngMessages:

var app = angular.module('myApp', ['ngMessages']);

---

3. Using ng-messages for Error Handling

Instead of using ng-show or ng-if for each error, ng-messages allows us to handle multiple errors efficiently.

<form name="userForm" novalidate>
    <label>Email:</label>
    <input type="email" name="email" ng-model="user.email" required>
    
    <div ng-messages="userForm.email.$error">
        <div ng-message="required">Email is required!</div>
        <div ng-message="email">Invalid email format!</div>
    </div>

    <button type="submit" ng-disabled="userForm.$invalid">Submit</button>
</form>

How it Works:

If the input is empty, the message “Email is required!” appears.
If the input is not in email format, the message “Invalid email format!” appears.
ng-messages ensures only one error message is displayed at a time.

---

4. Customizing Error Messages

You can customize error messages using ng-message-exp for dynamic conditions.

<div ng-messages="userForm.password.$error">
    <div ng-message="required">Password is required!</div>
    <div ng-message="minlength">Password must be at least 6 characters long!</div>
    <div ng-message="maxlength">Password must not exceed 12 characters!</div>
    <div ng-message-exp="'pattern'">Password must contain a special character!</div>
</div>

• ng-message="required" → Shown when the field is empty.
• ng-message="minlength" → Shown if length is less than 6.
• ng-message="maxlength" → Shown if length exceeds 12.
• ng-message-exp="'pattern'" → Used when applying a regex pattern check.

---

5. Displaying Messages Dynamically

You can display validation messages dynamically by binding them to $dirty and $touched.

<div ng-messages="userForm.username.$error" ng-if="userForm.username.$dirty">
    <div ng-message="required">Username is required!</div>
</div>

• Messages only appear if the user interacted with the field ($dirty).

---

6. Using ng-messages-include for Reusability

If you have multiple input fields with similar validation messages, you can reuse them using ng-messages-include.

Step 1: Create a separate error template (errors.html)

<div ng-message="required">This field is required!</div>
<div ng-message="email">Invalid email format!</div>
<div ng-message="minlength">Must be at least 6 characters!</div>

Step 2: Use ng-messages-include in multiple places

<div ng-messages="userForm.email.$error" ng-messages-include="errors.html"></div>
<div ng-messages="userForm.password.$error" ng-messages-include="errors.html"></div>

• This avoids repeating the same error messages in multiple places.

---

7. Styling Errors with CSS

To visually highlight errors, use ng-invalid and ng-valid classes.

input.ng-invalid {
    border: 2px solid red;
}
input.ng-valid {
    border: 2px solid green;
}
.ng-messages {
    color: red;
    font-size: 14px;
}

• Invalid inputs will have a red border, and valid ones will have a green border.