Angularjs implement form manual verification and form automatic verification _angularjs

There are roughly two types of forms validation for Angularjs, one is manual validation and the other is automated validation.
First, manual verification
The so-called manual verification is validated by Angularjs the properties of the form. To become a ANGULARJS form must meet two conditions:

1. Add novalidate= "novalidate" to form elements;

2. Add Name= "theform" to form elements as follows:

<! DOCTYPE html>  

Adding novalidate= "novalidate" to a form means that the form will no longer use the HTML5 validation attribute
to add name= "theform" to the form, meaning that the form's name is theform. How to use theform, such as whether we verify that the form has been modified theform. $submitted
Submit form by Ng-submit
Formmodel is a property in $scope
The form's email was manually validated, with many attributes of the Angularjs form, such as Theform.email. $valid, Theform. $pristine, Theform. $submitted, Theform.email . $error. required,theform.email. $error. Email
via <pre>{{theform | json}}</pre> Print all the properties of the Angularjs form

{"$error": {"required": [{"$validators": {}, "$asyncValidators": {}, "$parsers": [], "$formatte RS ": [null]," $viewChangeListeners ": []," $untouched ": True," $touched ": false," $pristine ": TR UE, "$dirty": false, "$valid": false, "$invalid": True, "$error": {"required": true}, "$nam E ":" 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 ': [], ' $vi
Ewchangelisteners ": [],  "$untouched": True, "$touched": false, "$pristine": True, "$dirty": false, "$valid": True, "$invalid": false, ' $error ': {}, ' $name ': ' Sex ', ' $options ': null}}

Above, any input with the name attribute is displayed above.
The module,controller is defined in the Second.js file and the method for submitting the form.

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 above form verification method advantage is controllable, but relatively cumbersome.
Second, automatic verification
Another form of ANGULARJS verification is automatic verification, that is, through directive, in addition to ANGULARJS directive, You will also need to use this third party module Angular-auto-validate.
About angular-auto-validate:
Installation: NPM i angular-auto-validate
Reference: <script src= ". /node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js "></script>
Module dependencies: var myApp = Angular.module ("app", ["jcs-autovalidate"]);
In order to localize the error information, you also need to Angular-localize This third party module:
Installation: NPM Install angular-localize--save
Module dependencies: var myApp = Angular.module ("app", ["Localize"]);
Reference

<script src= ". /node_modules/angular-sanitize/angular-sanitize.min.js "></script>
<script src=". /node_modules/angular-localize/angular-localize.min.js "></script>

In addition, when you click the Submit Form button, you need to disable the button and display a wait effect, which requires Angular-ladda this third party module:

Installation: Bower Install Angular-ladda--save
Module dependencies: var myApp = Angular.module ("app", ["Angular-ladda"]);
Reference

<link rel= "stylesheet" href= ". /bower_components/ladda/dist/ladda-themeless.min.css "/>

<script src=". /bower_components/ladda/dist/spin.min.js "></script>
<script src=". /bower_components/ladda/dist/ladda.min.js "></script>
<script src=". /bower_components/angular-ladda/dist/angular-ladda.min.js "></script>

The page is as follows:

<! DOCTYPE html>  

Above, first look at the submit button:

<div >
 <!--<button class= "btn btn-primary" ng-click= "OnSubmit ()" >Register</button>-->
 <button class= "btn btn-primary" Ladda = "Submitting" data-style= "Expand-right"
     type= "
     submit" >
  <span ng-show= "Submitting" > is registering ...</span>
  <span ng-show= "!submitting" > Registration </span >
 </button>
</div>

Ladda property value is bool, true indicates dynamic wait effect, false does not show dynamic wait effect, here submitting is a property in scope
Data-style= "Expand-right" indicates the dynamic wait effect on the right side of the button

Then take the age field in the form and say:

<div >
 <label for= "age" class= "Control-label" >Age</label>
 <input type= "number"
     class= "Form-control"
     id= "age"
     ng-model= "Formmodel.age
     " required= "required" min= "max="
     Ng-min-err-type= "
     Tooyoung" ng-max-err-type= "
     tooold"
  />
</div>

Among them, Min, max for AGULARJS directive, and Ng-min-err-type is angular-auto-validate directive. The practice followed here is the directive name-err-type of Ng-angularjs form validation, and what is the role of Tooyoung and Tooold, and where is it used?
is used at the module level and is defined in the Form_validation_auto.js file.

 var MyApp1 = angular.module (' MyApp1 ', [' jcs-autovalidate ', ' localize ', ' Angular-ladda '])
 
; Myapp1.run (function (defaulterrormessageresolver) {defaulterrormessageresolver.geterrormessages (). Then (function (
    errormessages) {errormessages[' Tooyoung '] = ' age must be less than {0} ';
    errormessages[' tooold ' = ' age cannot be greater than {0} ';
  errormessages[' badusername ' = ' user name can only contain numbers, letters, or underscores ';
});
 
});
  Myapp1.controller (' MyCtrl1 ', function ($scope, $http) {$scope. Formmodel = {};
 
  $scope. submitting = false;
    $scope. OnSubmit = function () {$scope. submitting = true;
    Console.log (' submitted ');
 
    Console.log ($scope. Formmodel);
        $http. Post (' URL ', $scope. Formmodel). Success (function (data) {console.log (':) ');
      $scope. submitting = false;
        ). Error (function (data) {Console.log (':(');
      $scope. submitting = false;
  });
};
}); 

Above, use the Angular-auto-validate defaulterrormessageresolver service in the Run method to customize the error message. The Tooyoung and Tooold on the page correspond to the errormessages[' Tooyoung ' and errormessages[' badusername ' here.

The whole content of this article is introduced here, hope to everybody learns angularjs to realize form verification to have help.