AngularJS provides rich filling of forms and verification. We can use ng-click to handle the AngularJS button click event, and then use the $dirty and $invalid flags to verify it. Use the novalidate form declaration to prohibit any browser-specific verification. Form controls use a lot of corner activities. Let's take a quick look at the events first.
event
AngularJS provides multiple events that can be associated with HTML controls. For example, ng-click is usually associated with a button. The following are events supported by AngularJS.
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
Use the command to click a button to reset the data.
<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 studentController($scope) { $scope.reset = function(){ $scope.firstName = "Mahesh"; $scope.lastName = "Parashar"; $scope.email = "[email protected]"; } $scope.reset();}</script>Verify data
The following tracking errors can be used.
$dirty - The stipulation has been changed.
$invalid-The status of this value is invalid.
$error- Indicates the exact error.
example
The following examples will show all the above instructions.
testAngularJS.html
<html><head><title>Angular JS Forms</title><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f2f2f2;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><h2>AngularJS Sample Application</h2><div ng-app="" ng-controller="studentController"><form name="studentForm" novelidate><table><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 is required.</span> </span></td></tr><tr><td>Enter last name: </td><td><input name="lastname" type="text" ng-model="lastName" required> <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid"> <span ng-show="studentForm.lastname.$error.required">Last Name is required.</span> </span></td></tr><tr><td>Email: </td><td><input name="email" type="email" ng-model="email" length="100" required><span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid"> <span ng-show="studentForm.email.$error.required">Email is required.</span> <span ng-show="studentForm.email.$error.email">Invalid email address.</span> </span></td></tr><tr><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></tr></table></form></div><script>function studentController($scope) { $scope.reset = function(){$scope.firstName = "Mahesh";$scope.lastName = "Parashar";$scope.email = "[email protected]"; } $scope.reset();}</script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script></body></html>Output
Open textAngularJS.html in a web browser. The results are as follows.
The above is the knowledge sorting of AngularJS forms. We will continue to add relevant knowledge in the future. Thank you for your support for this site!