About the implementation code analysis of AngularJS verification form function

This article mainly introduces the AngularJS form verification function, and analyzes the operating steps, implementation skills and related precautions of AngularJS form verification based on specific examples. #, Friends who need it can refer to

This article describes the AngularJS form verification function with examples. Share it with everyone for your reference, the details are as follows:

Under the jurisdiction of AngularJS, each form form will create an instance of ngFormController. Each input in the form will create an ngModelController instance under this instance to control the behavior of each input.

First start with simple verification.

AngularJs's ngModelController provides several properties:

$pristine;$dirty;$valid;$invalid ;$error

pristine: The form has not changed.
dirty: The form has changed.
valid: All controls comply with validation rules.
invalid: At least one control does not comply with the validation rules.
error: There is an error, but I don’t know what is wrong.

Create a form as follows:

<form name="userForm" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span ng-show="userForm.name.$error.pattern">用户名必须XXXX</span>
</form>

First, each form must have its own name. Use this name to control the input below you. Then, each

input tag must have its own name. Name is a critical step and is used to identify each different input and thereby identify different ngModelControllers. Use pattern to set your own regular expression rules. Use $error to check whether the regular expression is correct. And assign it to the ng-show directive. If there is an error, the entire $error will return true and the set prompt information will be displayed until the regular expression passes, $error will return false, and ng-show will hide it.

The above simple example does not reset the

controller behavior yourself, everything is the default of AngularJs. You can see that the judgment code in ng-show can actually be completed by JS later, so you can see the specific process of ngModelController.

<!--html-->
<form name="userForm" ng-controller="main" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span style="color:red" ng-show="showError(userForm.name,&#39;pattern&#39;)">用户名必须XX</span>
  <span style="color:green" ng-show="showSuccess(userForm.name)">成功！</span>
  <!--对按钮进行动态锁定-->
  <button class="btn btn-primary btn-lg" ng-disabled="submit(userForm)">SAVE</button>
</form>

/*JS*/
app.controller("main",function($scope){
  $scope.showError=function(ngModelController,abc){
    return ngModelController.$error[abc];
  };
  $scope.showSuccess=function(ngModelController){
    return ngModelController.$valid; /*至少有1错误，返回false，无错误，返回true*/
  };
   $scope.submit=function(ngFormController){
    return ngFormController.$invalid; /*valid的取反*/
  };
});

The judgment is made directly in the ngModelController in the controller. There is a pitfall in it, that is, there are no parameters for judging attributes such as $valid. To judge $error, you need to indicate "what to judge". I passed a regular expression of my own to him.

AngularJs can also "lock" the submit button of the form. But it should be noted that at this time, the Controller corresponding to BUTTON is no longer the ngModelController for a certain input, but the ngFormController for the entire form. Therefore, the $invalid inside is to determine whether there is any problem with all the inputs, and everything is fine. will be unlocked when .

Thinking: Can regular expressions or minlength similar restrictions be written in JS files.

The above is the detailed content of About the implementation code analysis of AngularJS verification form function. For more information, please follow other related articles on the PHP Chinese website!