[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; });
