« Previous | 1 | 2 | 3 | Next »
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>
<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>
Validate data
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>
« Previous | 1 | 2 | 3 | Next »


copyright © 2014 - all rights riserved by javatechnologycenter.com