Angularjs Automatic form Verification _angularjs

Another form of ANGULARJS verification is automatic verification, that is, through the directive to achieve, in addition to ANGULARJS directive, also need to use angular-auto-validate this third-party module.

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:

First look at the submit button:

<div class= "Form-group" >
 <!--<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 class= "Form-group" >
 <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;});

The above is the entire contents of this article, I hope that the Angularjs manual form verification can be skilled operation.