ng-messages in angularjs

         mg-message is a directive with the purpose of show and hide the directive based on validation or condition of Object. This Object reference of ng-messages base Object defend to key/value base to map the component display inside of ng-message.

Syntax:

<Div ng-messages="expression" role="alert">
  <Div ng-message="Value">...</Div>
  <Div ng-message="Value1, Value2, ...">...</Div> 

 </Div>

HTML :

<div ng-app="msgApp">
    <div ng-controller="msgCtrl">
        <form name="msgForm">
            <input type="text" name="userName" ng-model="user_name" ng-maxlength="20" ng-minlength="5" required />           
             <pre>{{ msgForm.userName.$error | json }} </pre>
            <div ng-messages="msgForm.userName.$error" style="color:maroon" role="alert">
                <div ng-message="required">You did not enter a field</div>
                <div ng-message="minlength">Your field is too short</div>
                <div ng-message="maxlength">Your field is too long</div>
            </div>
            <input type="number" name="age" ng-model="user_age" min="18" max="100" required />
            <pre>{{ msgForm.age.$error | json }} </pre>
            <div ng-messages="msgForm.age.$error" style="color:maroon" role="alert">
                <div ng-message="required">Enter a age</div>
                <div ng-message="min">Give a age above 18 </div>             
                <div ng-message="max">Give a age below 100 </div>
                <div ng-message-exp="20==20">Give a age below 100 </div>
            </div>
            {{age}}
        </form>
    </div>
</div>


AngularJs:

var app = angular.module('msgApp',['ngMessages']);
app.controller('msgCtrl', function($scope){
  
});

Result:

Demo