![[AngularJS] Angular 1.3 ngMessages with ngAnimate](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1 "[AngularJS] Angular 1.3 ngMessages with ngAnimate")
Note: Can use $dirty to check whether user has intracted with the form:
https://docs.angularjs.org/api/ng/type/form.FormController
Read More:
http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html
https://egghead.io/lessons/angularjs-using-ng-messages-with-ng-animate
<!DOCTYPE html>
<html>
<head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-messages.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.js"></script> <title>What's new in Angular 1.3</title>
</head>
<body ng-app="app" ng-controller="MainCtrl as vm">
<h1>Angular {{vm.angularVersion}}</h1>
<h2>
Using ngMessages with ngAnimate
<small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small>
</h2>
<hr /> <h2>Demo</h2> <form name="myForm">
<input type="email" name="myField" ng-model="field" required minlength="5" />
<div class="my-messages" ng-show="myForm.myField.$touched" ng-messages="myForm.myField.$error">
<div class="some-message" ng-message="required">This field is required</div>
<div class="some-message" ng-message="minlength">Input too short</div>
<div class="some-message" ng-message="email">This field must be an email</div>
</div>
</form> </body>
</html>
.my-messages {
position: relative;
}
.my-messages.ng-active {
/* messages are showing */
}
.my-messages.ng-inactive {
/* messages are not showing */
}
.some-message {
position: absolute;
opacity:;
transition: .3s linear all;
font-size: .8em;
}
.some-message.ng-enter.ng-enter-active {
opacity:;
top:;
}
.some-message.ng-enter {
opacity:;
top: -20px;
}
.some-message.ng-leave {
opacity:;
top:;
}
.some-message.ng-leave-active {
opacity:;
top: 20px;
}
var app = angular.module('app', ['ngMessages', 'ngAnimate']);
app.controller('MainCtrl', function MainCtrl() {
'use strict';
var vm = this;
vm.angularVersion = angular.version.full;
});