Latest Posts

How to handle error messages dynamically

Posted on by Rishan Solutions

Loading

Handling error messages dynamically is a crucial aspect of creating a user-friendly web application, particularly for form validation. By providing real-time feedback, you can improve the user experience and guide users to correct their input when errors occur.

In AngularJS, there are several ways to handle error messages dynamically. You can use built-in directives, such as ng-show, ng-if, or ng-messages, to display error messages based on the form validation state.

Steps to Handle Error Messages Dynamically

1. Using ngModel and ng-show for Validation

Let’s start with a basic form that will validate user input. We’ll handle error messages dynamically by displaying them when the user enters invalid data into the input field.

Example: Basic Form with Dynamic Error Messages

HTML (index.html)

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-controller="FormController">
        <form name="myForm" ng-submit="submitForm()" novalidate>
            <label for="email">Email:</label>
            <input type="email" name="email" ng-model="email" required />

            <!-- Dynamic Error Messages -->
            <div ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <span ng-show="myForm.email.$error.required">Email is required.</span>
                <span ng-show="myForm.email.$error.email">Invalid email format.</span>
            </div>

            <br/><br/>
            <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
        </form>
    </div>
</body>
</html>

JavaScript (app.js)

angular.module('myApp', [])
  .controller('FormController', function($scope) {
    $scope.submitForm = function() {
      if ($scope.myForm.$valid) {
        alert("Form submitted successfully!");
      } else {
        alert("Please correct the form errors before submitting.");
      }
    };
  });

Explanation of Code:

  1. ng-show for Dynamic Error Messages:
    • The ng-show directive is used to display error messages based on the validity of the email input field.
    • myForm.email.$dirty && myForm.email.$invalid: This ensures the error message only shows after the user has interacted with the field and made it dirty (i.e., modified it).
    • The error messages are displayed conditionally based on the specific validation error, such as required or invalid email.
  2. Form Submission:
    • The submit button is disabled using ng-disabled="myForm.$invalid", which ensures that the form can’t be submitted unless it is valid.
  3. Error Displaying:
    • If the email field is empty, the “Email is required.” message will be shown.
    • If the email format is invalid, the “Invalid email format.” message will be displayed.

2. Using ng-messages for Multiple Dynamic Errors

ng-messages is a more advanced way to handle dynamic error messages. It simplifies displaying multiple error messages for each form field by automatically iterating through the error states.

Example: Form with ng-messages for Dynamic Errors

HTML (index.html)

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="angular-messages.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-controller="FormController">
        <form name="myForm" ng-submit="submitForm()" novalidate>
            <label for="email">Email:</label>
            <input type="email" name="email" ng-model="email" required />

            <!-- Dynamic Error Messages using ng-messages -->
            <div ng-messages="myForm.email.$error" ng-if="myForm.email.$touched">
                <div ng-message="required">Email is required.</div>
                <div ng-message="email">Invalid email format.</div>
            </div>

            <br/><br/>
            <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
        </form>
    </div>
</body>
</html>

JavaScript (app.js)

angular.module('myApp', ['ngMessages'])
  .controller('FormController', function($scope) {
    $scope.submitForm = function() {
      if ($scope.myForm.$valid) {
        alert("Form submitted successfully!");
      } else {
        alert("Please correct the form errors before submitting.");
      }
    };
  });

Explanation of Code:

  1. ng-messages Directive:
    • The ng-messages directive allows us to bind error messages to specific validation states. It dynamically displays validation error messages based on the field’s $error object.
    • ng-if="myForm.email.$touched" ensures that the error messages are displayed only after the user interacts with the form field.
  2. Error Messages:
    • ng-message="required" displays the message if the email field is empty.
    • ng-message="email" displays the message if the email is invalid.
  3. Disabling Submit Button:
    • The ng-disabled="myForm.$invalid" on the submit button disables the form submission if there are any validation errors.

3. Handling Custom Error Messages

You can also define custom error messages using your own validation logic. Let’s create a custom directive to validate the email format and display an error message dynamically.

Example: Custom Email Validation Directive

HTML (index.html)

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div ng-controller="FormController">
        <form name="myForm" ng-submit="submitForm()" novalidate>
            <label for="email">Email:</label>
            <input type="email" name="email" ng-model="email" custom-email-validator required />

            <!-- Dynamic Error Messages -->
            <div ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <span ng-show="myForm.email.$error.required">Email is required.</span>
                <span ng-show="myForm.email.$error.customEmail">Invalid email format.</span>
            </div>

            <br/><br/>
            <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
        </form>
    </div>
</body>
</html>

JavaScript (app.js)

angular.module('myApp', [])
  .directive('customEmailValidator', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$validators.customEmail = function(value) {
          if (value) {
            // Custom email validation regex
            var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            return emailPattern.test(value);
          }
          return true;
        };
      }
    };
  })
  .controller('FormController', function($scope) {
    $scope.submitForm = function() {
      if ($scope.myForm.$valid) {
        alert("Form submitted successfully!");
      } else {
        alert("Please correct the form errors before submitting.");
      }
    };
  });

Explanation of Code:

  1. Custom Email Validator Directive:
    • The customEmailValidator directive performs custom validation for the email format.
    • If the email format is invalid, the $error.customEmail flag will be set to true, and the error message will be displayed.
  2. Dynamic Error Message:
    • The ng-show="myForm.email.$error.customEmail" condition checks if the email has an invalid format and shows the custom error message.

Leave a Reply

Your email address will not be published. Required fields are marked *