AngularJS Message Module

AngularJS provides ngMessages a new module to provide more control on displaying messages.

ngMessage module is present in angular-messages.min.js script file.

In this demo, "We will implement ngMessage module for email validation inside a form".

Below code shows the demonstration of ngMessage module wing ng-messages and ng-message element.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
  <script src="//code.angularjs.org/1.3.0-beta.10/angular-messages.min.js">
  </script>
  <meta charset="utf-8">
  <title>ngMessage Example in  AngularJS</title>
</head>

<body>
  <form name="studentForm">
    <input type="email" name="studentEmail" ng-model="email" required placeholder="Enter email" />
    <div ng-messages="studentForm.studentEmail.$error">
      <div ng-message="required">Email field is required</div>
      <div ng-message="email">Email address is invalid</div>
    </div>
  </form>
  <script>
    var appModule = angular.module('myApp', ['ngMessages']);
  </script>
</body>
</html>

The output of the above code is present in the below embedded JSBIN link.

ngMessage Example in AngularJS

AngularJS Message Module

Related

Sandeep