AngularJS manual form verification, angularjs form

AngularJS manual form verification, angularjs form

The so-called manual verification is through the AngularJS form attribute to verify, and become an AngularJS form must meet two conditions:

1. Add novalidate = "novalidate" to the form element ";

2. Add name = "theForm" to the form element ",

As follows:

<! DOCTYPE html> 



 
 
 
  
● Adding novalidate = "novalidate" to form means that the form will no longer use the HTML5 verification feature
 
 
  
● Adding name = "theForm" to form means that the form name is theForm. How to Use theForm, such as verifying whether the form has been modified by theForm. $ submitted
 
 
  
● Submit a form through ng-submit
 
 
  
● FormModel is an attribute in $ scope.
 
 
  
● Manually verified the form Email and used many attributes of the AngularJS form, such as theForm. email. $ valid, theForm. $ pristine, theForm. $ submitted, theForm. email. $ error. required, theForm. email. $ error. email
 
 
  
● Print all attributes of AngularJS forms using <pre >{{ theForm | json }}</pre>

 
{ "$error": { "required": [  {  "$validators": {},  "$asyncValidators": {},  "$parsers": [],  "$formatters": [   null  ],  "$viewChangeListeners": [],  "$untouched": true,  "$touched": false,  "$pristine": true,  "$dirty": false,  "$valid": false,  "$invalid": true,  "$error": {   "required": true  },  "$name": "email",  "$options": null  } ] }, "$name": "theForm", "$dirty": false, "$pristine": true, "$valid": false, "$invalid": true, "$submitted": false, "email": { "$validators": {}, "$asyncValidators": {}, "$parsers": [], "$formatters": [  null ], "$viewChangeListeners": [], "$untouched": true, "$touched": false, "$pristine": true, "$dirty": false, "$valid": false, "$invalid": true, "$error": {  "required": true }, "$name": "email", "$options": null }, "sex": { "$validators": {}, "$asyncValidators": {}, "$parsers": [], "$formatters": [], "$viewChangeListeners": [], "$untouched": true, "$touched": false, "$pristine": true, "$dirty": false, "$valid": true, "$invalid": false, "$error": {}, "$name": "sex", "$options": null }}
All inputs with the name attribute are displayed above.
The module, controller, and form submission methods are defined in the second. js file.
var myApp1 = angular.module('myApp1',[]);myApp1.controller('myCtrl1', function($scope, $http){ $scope.formModel = {}; $scope.onSubmit = function(){  $http.post('someurl',$scope.formModel)   .success(function(data){    console.log(':)');   })   .error(function(data){    console.log(':(');   });  console.log($scope.formModel); };});
The preceding form verification method is highly controllable but cumbersome.

The above is all the content of this article. We hope to be proficient in AngularJS manual form verification.
Articles you may be interested in:

 

 
  
AngularJS implements Form Verification
 
  
Detailed explanation of Form Verification programming in AngularJS
 
  
Details about how AngularJS implements Form Verification
 
  
AngularJs implements ng1.3 + Form Verification
 
  
AngularJS uses ngMessages for Form Verification
 
  
AngularJS uses angular-formly for Form Verification