angular自定义验证 ngModel的一些理解
每次使用自定义校验都不记得具体详情，故而记录之
1、数据流向
初始化 ——>$formatters ——>modelValue——>用户操作——>viewValue——>$parser——>modelValue
$formatters 通过代码调用，根据return的值初始化viewValue(一般不会用上这个功能)
$parser 通过用户输入，根据return的值赋给modelValue（不返回输入值，modelValue和viewValue的值不同也是可以的，这是为了满足啥需求设计出的）
下面有个demo
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>parser_uppercase</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('MyCtrl', function($scope){
$scope.name = 'kobe';
$scope.changeName = function(){
$scope.name = $scope.newName;
}
});
app.directive('myTag', function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, ele, attrs, ctrl){
ctrl.$parsers.push(function(value){
console.log('$parsers方法被调用');
value = value.toUpperCase();
return value;
});
ctrl.$formatters.push(function(value){
console.log('$formatters方法被调用');
value = value.toUpperCase();
return value;
});
}
}
})
</script>
</head>
<body ng-controller="MyCtrl">
<input type="text" my-tag ng-model="name"/>
<Strong>ModelValue:{{name}}</Strong>
<input type="text" ng-model="newName"/>
<button ng-click="changeName()">ChangeName</button>
</body>
</html>
2、常用的校验方式（$parser VS $watch）
一般有两种，一种是用$parser，一种使用$watch
app.directive('promotionName',function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModelController) {
ngModelController.$parsers.push(function(viewValue) {
var reg = /^[\u4e00-\u9fa50-9A-Za-z]{1,20}$/ ;
if(!reg.test(viewValue)){
ngModelController.$setValidity("promotionName",false);
ngModelController.$formatters.push(undefined);
return undefined;
}else{
ngModelController.$setValidity("promotionName",true);
ngModelController.$formatters.push(viewValue);
return viewValue;
}
})
}
};
});
使用$watch(《angularJS权威指南》demo使用watch)
app.directive('passwordConfirm',function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModelController) {
scope.$watch(attrs.ngModel,function (newValue,oldValue) {
if(newValue!==scope.passwordInfo.password){
ngModelController.$setValidity("passwordConfirm",false);
}else{
ngModelController.$setValidity("passwordConfirm",true);
}
})
}
};
});
$parse和$watch方式的优劣，没了解angularJS的内部源码，不能详尽分析，一句话
同步的使用$parse，涉及异步则使用$watch（我猜的）
angular自定义验证 ngModel的一些理解的更多相关文章
- angular中的表单数据自定义验证
之前说过了angular是如何给表单的数据进行基本的,常用的验证的:angular学习笔记(二十)-表单验证 但是在实际工作中,这些验证是远远不够的,很多时候我们需要自定义一些验证规则,以及一些异步, ...
- 让Angular自定义组件支持form表单验证
Angular提供了一套非常强大的表单验证库(vue和react都需要第三方库的支持),可以非常方便简单实现web应用程序中的表单验证功能.但是如何让我们自定义的组件也支持验证呢? 我遇到一个需求是封 ...
- Angular：Reactive Form的使用方法和自定义验证器
本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括: Reactive Form创建方法 如何使用验证 自定义验证器 下面开始进入正文! Reactive Fo ...
- Angular自定义表单验证
前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...
- 关于AngularJs，数据绑定与自定义验证
最近开始着手学起了Angular,抱着好奇的心情开始研究了起来.忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的.(当然,我只是刚开始学,所有可能有更强大的功能,只是我还没有看到) 那 ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- angularJS中的表单验证（包括自定义验证）
表单验证是angularJS一项重要的功能,能保证我们的web应用不会被恶意或错误的输入破坏.Angular表单验证提供了很多表单验证指令,并且能将html5表单验证功能同他自己的验证指令结合起来使用 ...
- Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- ASP.NET MVC自定义验证Authorize Attribute
前几天Insus.NET有在数据库实现过对某一字段进行加密码与解密<使用EncryptByPassPhrase和DecryptByPassPhrase对MS SQLServer某一字段时行加密和 ...
随机推荐
- HDFS中NameNode启动过程
移动到hadoop文件目录下 NameNode启动命令:sbin/hadoop-daemon.sh start namenode DataNode启动命令:sbin/hadoop-daemon.sh ...
- waiting for spring......
世间哪得双全法,不负如来不负卿....<仓央嘉措>
- JQuery hover鼠标变换
一般而言,我们为非按钮.链接等元素添加hover事件时,虽然能够处理悬停事件,但是鼠标却并没有变化,会造成悬停事件不明显的结果,为此,我们可以添加CSS样式cursor:pointer,使得该元素的悬 ...
- C++随机数rand(), srand()
c++产生随机数会用到rand(), srand()函数,下面总结两个函数特性和使用. 1. rand() #include <iostream> #include <cstdlib ...
- nodejs querystring踩坑笔记----只能用于表单提交
API中的实例: var http = require('http'); var querystring = require('querystring'); var postData = querys ...
- O（mn）实现LCIS
序: LCIS即求两序列的最长公共不下降子序列.思路于LCS基本一致. 用dp[i][j]记录当前最大值. 代码实现: /* About: LCIS O(mn) Auther: kongse_qi D ...
- Spring Session实现分布式session的简单示例
前面有用 tomcat-redis-session-manager来实现分布式session管理,但是它有一定的局限性,主要是跟tomcat绑定太紧了,这里改成用Spring Session来管理分布 ...
- jQuery选择器---层次选择器总结
今天要分享的是jQuery层次选择器,层次选择器的分类如图: 接下来就开始了 要不先养养眼精神一下: 开始1.祖先选择器: 案例: <form> <label>Name:< ...
- Java学习笔记——山西煤老板蛋疼的拉车问题
小荷才露尖尖角,早有蜻蜓立上头 --小池 这个问题是这样描述的: 山西煤老板有3000吨煤,要运到1000km公里外的地方卖.他选择使用火车来运煤,每辆火车行驶一公里将消耗一吨煤,且火车载货上限为10 ...
- PHP电商订单自动确认收货redis队列
一.场景 之前做的电商平台,用户在收到货之后,大部分都不会主动的点击确认收货,导致给商家结款的时候,商家各种投诉,于是就根据需求,要做一个订单在发货之后的x天自动确认收货.所谓的订单自动确认收货,就是 ...