AngularJS ng-MessageExp Directive

The AngularJS ng-Message directive is used to show and hide a particular message. It determines which messages are visible based on the state of the provided key/value map that ngMessages listens on

In order to use ng-Message directive, you need to include below supported files in your HTML page: <script src="angular.js"> <script src="angular-messages.js">

Syntax

<div ng-messages="myForm.myField.$error" role="alert">
	<div ng-message="required">You did not enter field value</div>
	<div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" 
	  ng-message-exp="['minlength', 'maxlength']">Name must be between 
	  than 3 and 10 characters</div>
</div>

AngularJS ng-MessageExp Directive Example

<!DOCTYPE html>    
<html>    
<head> <!-- www.techstrikers.com -->    
<title>AngularJS ngMessageExp Sample</title>    
<script src="https://www.techstrikers.com/AngularJS/Includes/angular.min.js"></script>
  <script src="https://www.techstrikers.com/AngularJS/Includes/angular-messages.js"></script>  
    <script type="text/javascript">
      var app = angular.module('ngMessagesExpExample')
      app.controller('testngMessagesExp', function ($scope) {
        $scope.example = {
            name: ''
        }
    });
  </script>
 
</head> 
  <body ng-app="ngMessagesExpExample" ng-controller='testngMessagesExp'>
    <fieldset style="background-color:#DDE4E9;">      
    <legend>AngulerJS ngMessageExp Example</legend>  
  <form name="myForm">
    <div style="font-family:Arial;margin:10px;width:350px;">
  <label>Enter Name:</label>
  <input type="text" placeholder="Max 10 characters" 
         ng-model="example.name"
         name="myName"
         minlength="3"
         maxlength="10"
         required /><br>
    </div>
    <div ng-messages="myForm.myName.$error">
      <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" 
	  ng-message="required">Enter Name</div>
      <div style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" 
	  ng-message-exp="['minlength', 'maxlength']">Name must be between than 3 and 10 characters</div>
    </div>
  </div>
    
</form>
</fieldset> 
</body>      
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-MessageExp Directive

AngularJS ng-MessageExp Directive Example

Recent Articles