Angularjs Basics-Form Validation

<form name= "Form" novalidata>

<label name= "email" >your email</label><input type= "email" name= "email" ng-model= "email" placeholder= "email Address" ></form> / * Below is the content of your friend's space * * Angular Advanced Check characteristics

In some cases, individual form validation does not meet the needs, and there may be some special checks, such as associating two data and so on. Usually such checks are reusable, which requires a directive. The directive of the custom checksum you write is not complicated, and you first need to know several Angular provides the properties and interfaces.

1. $setValidity ()

This method can be used to artificially set the $valid and $ invalid of a form control, that is, to change whether the form control passes the state of the checksum. Similar to $setdirty () and $setpristine ().

?

1	ngModel.$setValidity(‘max-custom‘, true);    // 类似这样的设置就将一个表单控件的状态改变了, ngModel 是 directive 的 link 的第四个参数,$setValidity 的第一个参数可以定义一个标志,第二个参数true 表示通过验证, false 表示未通过

2. $parsers

This property is slightly more abstract, and when the value of Ngmodel is changed, Angular calls $setViewValue (value) itself, and then the function in the Ngmodel $parsers array is called one by one, when $parsers [0] The execution results are passed to the $parsers [1] After the method is called, and so on, these functions can convert the value of Ngmodel or set the legitimacy of the form by $setValidity ().

So if we want to implement something special, we can insert a function in the $parsers, and then it will be called in the validation chain, and if you don't want the data model to update, let $parsers return the value of the function return undefined.

?

12345678910111213141516171819

.directive(‘maxMax‘, function(){  return{    require: ‘ngModel‘,    restrict: ‘A‘,    link: function($scope, iElm, iAttrs, ngModel) {      if(!ngModel) return;      ngModel.$parsers.unshift(function(viewValue){        varnum = parseInt(viewValue);        if(num>=0 && num<99){          ngModel.$setValidity(‘maxMax‘,true);          returnviewValue;        }else{          ngModel.$setValidity(‘maxMax‘,false);          returnundefined;        }      });    }  };})

The red font part through my practice and exploration, found that the wrong, correct should be as follows:

So if we want to implement something special, you can insert a function in the $parsers, and it will be called in the validation chain, and if you don't want the data model to be updated, let $parsers return the value of the function return.

12345678910111213141516171819

.directive(‘maxMax‘, function(){  return{    require: ‘ngModel‘,    restrict: ‘A‘,    link: function($scope, iElm, iAttrs, ngModel) {      if(!ngModel) return;      ngModel.$parsers.unshift(function(viewValue){        varnum = parseInt(viewValue);        if(num>=0 && num<99){          ngModel.$setValidity(‘maxMax‘,true);          returnviewValue;        }else{          ngModel.$setValidity(‘maxMax‘,false);          returnViewvalue; // 这里如果返回 undefined 则会导致部分ng自带验证器失效，因为获取不到ngModel.$viewValue的值了。        }      });    }  };})

Angularjs Basics-Form Validation