Using ng-messages for better error handling

Error handling in AngularJS forms can be simplified and improved using the ng-messages module. Instead of writing multiple ng-show conditions for validation errors, ng-messages provides a cleaner, more maintainable, and scalable way to display error messages dynamically.

---

1. Why Use ng-messages?

🔹 Easier Management: Instead of multiple ng-show statements, use a single ng-messages directive.
🔹 Scalability: Works well for forms with many validation rules.
🔹 Dynamic Messaging: Error messages update dynamically as the user types.

---

2. Setting Up ng-messages

The ng-messages module is part of angular-messages.js. To use it:

Step 1: Include the angular-messages Library

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

Step 2: Inject ngMessages into the Module

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

---

3. Example: Using ng-messages for Form Validation

Requirement: Validate name, email, and password fields using ng-messages.

Step 1: Create the Form with ng-messages

<div ng-app="myApp" ng-controller="FormController">
    <form name="userForm" novalidate>

        <label>Name:</label>
        <input type="text" name="name" ng-model="user.name" required>
        <div ng-messages="userForm.name.$error">
            <p ng-message="required">❌ Name is required.</p>
        </div>

        <label>Email:</label>
        <input type="email" name="email" ng-model="user.email" required>
        <div ng-messages="userForm.email.$error">
            <p ng-message="required"> Email is required.</p>
            <p ng-message="email"> Enter a valid email.</p>
        </div>

        <label>Password:</label>
        <input type="password" name="password" ng-model="user.password" ng-minlength="6" required>
        <div ng-messages="userForm.password.$error">
            <p ng-message="required"> Password is required.</p>
            <p ng-message="minlength"> Password must be at least 6 characters.</p>
        </div>

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

Error messages appear dynamically as the user types.

---

4. Using ng-messages-multiple for Multiple Errors

🔹 By default, ng-messages displays only one error at a time.
🔹 To show multiple errors at once, use ng-messages-multiple.

Modified Code

<div ng-messages="userForm.password.$error" ng-messages-multiple>
    <p ng-message="required"> Password is required.</p>
    <p ng-message="minlength"> Password must be at least 6 characters.</p>
</div>

All validation messages appear at the same time.

---

5. Customizing Error Messages Using ng-message-exp

Use ng-message-exp to show dynamic error messages based on conditions.

Example: Custom Message Based on Character Length

<div ng-messages="userForm.password.$error">
    <p ng-message="required"> Password is required.</p>
    <p ng-message-exp="'minlength'">
         Password is too short! Enter at least {{ userForm.password.$error.minlength.requiredLength }} characters.
    </p>
</div>

This message dynamically updates the minimum required length.

---

6. Summary Table

Feature	Solution
Show single error at a time	ng-messages="form.field.$error"
Show multiple errors at once	ng-messages-multiple
Customize error messages	ng-message-exp