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某一字段时行加密和 ...
随机推荐
- Unity Android路径及注意事项
Application.temporaryCachePath==/storage/emulated/0/Android/data/com.***.***/cache Application.persi ...
- const常量类型
1.定义:const常量类型表示一个”常值变量“,其值是不能被修改的变量.即一旦变量被声明为const类型,编译器将禁止任何试图修改该变量的操作. 2.声明:const <声明数据类型> ...
- python与opencv的结合之人脸识别值
首先还是要感谢http://www.jb51.net/article/67392.htm这位大神的无私奉献,开源的代码,让我省去了很多事,但是就光系统环境的配置就花去了我将近一个星期的时间,真是不容易 ...
- CF #271 F Ant colony 树
题目链接:http://codeforces.com/contest/474/problem/F 一个数组,每一次询问一个区间中有多少个数字可以整除其他所有区间内的数字. 能够整除其他所有数字的数一定 ...
- HDU 5556 最大独立集
这题主要有了中间的一些连通块的限制,不太好直接用二分图最大独立集做.考虑到图比较小,可以作补图求最大团来求解. #include <iostream> #include <vecto ...
- 数据结构与算法(c++)——跳跃表(skip list)
今天要介绍一个这样的数据结构: 单向链接 有序保存 支持添加.删除和检索操作 链表的元素查询接近线性时间 ——跳跃表 Skip List 一.普通链表 对于普通链接来说,越靠前的节点检索的时间花费越低 ...
- C#Execl
using System.IO; using System.Text; namespace iLIS.Common { /// <summary> /// 生成Excel文档内容 /// ...
- [编织消息框架][传输协议]stcp简单开发
测试代码 public class ServerSTCP { static int SERVER_PORT = 3456; static int US_STREAM = 0; static int F ...
- hibernate 多对多关系总结
hibernate中,对对象关系的映射处理估计是最让人迷惑和头疼的,特别是cascade和inverse属性的使用,不知已经杀死了我多少个脑细胞了,好记性永远比不上烂笔头,为了能节省自己的脑细胞,降低 ...
- Python魔法方法总结及注意事项
1.何为魔法方法: Python中,一定要区分开函数和方法的含义: 1.函数:类外部定义的,跟类没有直接关系的:形式: def func(*argv): 2.方法:class内部定义的函数(对象的方法 ...