Form validation and animation
•Download as PPTX, PDF•
0 likes•60 views
This document discusses form validation and animation in AngularJS. It describes how to use AngularJS directives like ng-click, ng-change, and ng-model to validate forms. It also discusses using the $dirty, $invalid, and $error flags to check form validation. Additionally, it covers how to add animation to AngularJS applications using ngAnimate and directives like ng-show, ng-hide, ng-class, ng-repeat, and ng-switch. Sample code is provided for a controller and form validation.
Recommended
More Related Content
What's hot
Similar to Form validation and animation
Similar to Form validation and animation (20)
More from jagriti srivastava
More from jagriti srivastava (15)
Recently uploaded
Recently uploaded (20)
Form validation and animation
- 1. Form validation and Animation JAGRITI SRIVASTAVA
- 2. Form validation and Animation AngularJS enriches form filling and validation. ng-click to handle AngularJS click on button and use $dirty and $invalid flags to do the validations Events used in angular js with HTML controls ng-click ng-dbl-click ng-mousedown ng-mouseup ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-keydown ng-keyup ng-keypress ng-change
- 3. Data validation keywords in angular js $dirty − states that value has been changed. $invalid − states that value entered is invalid. $error − states the exact error. Script for controller <script> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.reset = function(){ $scope.firstName = "neosphere"; $scope.lastName = "Institute"; $scope.email = "neosphere.com.np"; } $scope.reset(); }); </script>
- 4. Creating controller and form for form validation <div ng-app = "mainApp" ng-controller = "studentController"> <form name = "studentForm" novalidate> <table border = "0"> <tr> <td>Enter first name:</td> <td><input name = "firstname" type = "text" ng-model = "firstName" required> <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid"> <span ng-show = "studentForm.firstname.$error.required">First Name required</span> </span> </td> </tr>
- 5. <td><button ng-click = "reset()">Reset</button> </td> <td><button ng-disabled = "studentForm.firstname.$dirty && studentForm.firstname.$invalid || studentForm.lastname.$dirty && studentForm.lastname.$invalid || studentForm.email.$dirty && studentForm.email.$invalid" ng-click="submit()">Submit</button> </td> </table> </form> </div>
- 6. Angular Animations AngularJS provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered To make your applications ready for animations, include the AngularJS Animate library Then refer to the ngAnimate module in application <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular- animate.js"></script> <body ng-app="ngAnimate">
- 7. For applications having name the ngAnimate property will add dependency for animation <body ng-app="myApp"> <h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div> <script> var app = angular.module('myApp', ['ngAnimate']); </script>
- 8. The directive to add and remove classes are : ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-switch