[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: 1;
transition: .3s linear all;
font-size: .8em;
}
.some-message.ng-enter.ng-enter-active {
opacity: 1;
top: 0;
}
.some-message.ng-enter {
opacity: 0;
top: -20px;
}
.some-message.ng-leave {
opacity: 1;
top: 0;
}
.some-message.ng-leave-active {
opacity: 0;
top: 20px;
}var app = angular.module('app', ['ngMessages', 'ngAnimate']);
app.controller('MainCtrl', function MainCtrl() {
'use strict';
var vm = this;
vm.angularVersion = angular.version.full;
});