|
AngularJS enriches form filling and validation. We can use ng-click to handle AngularJS click on button and use $dirty and $invalid flags to do the validations in seemless way. Use novalidate with a form declaration to disable any browser specific validation. Forms controls makes heavy use of Angular events. Let's have a quick look on events first.
Events AngularJS provides multiple events which can be associated with the HTML controls. For example ng-click is normally associated with button. Following are supported events in Angular JS. 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 ng-click Reset data of a form using on-click directive of a button.
<input name = "firstname" type = "text" ng-model = "firstName" required>
Validate data<input name = "lastname" type = "text" ng-model = "lastName" required> <input name = "email" type = "email" ng-model = "email" required> <button ng-click = "reset()">Reset</button> <script> function empController($scope) { $scope.reset = function(){ $scope.firstName = "aarif"; $scope.lastName = "mohammad"; $scope.email = "aarif.mohammad@infovisionlabs.com"; } $scope.reset(); } </script> Following can be used to track error. $dirty − states that value has been changed. $invalid − states that value entered is invalid. $error − states the exact error.
<td>
<input name = "firstname" type = "text" ng-model = "firstName" required> <span style = "color:red" ng-show = "empForm.firstname.$dirty && empForm.firstname.$invalid"> <span ng-show = "emp.firstname.$error.required">First Name is required.</span> </span> </td> |
copyright © 2014 - all rights riserved by javatechnologycenter.com