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某一字段时行加密和 ...
随机推荐
- PHP的laravel框架后台实现数据导出excel的功能
要想在PHP后台实现excel导入导出功能,一种简单有效的方法就是使用phpexcel插件. 要使用phpexcel插件,首先需要下载composer,这个工具是专门用来管理项目中库之间的依赖关系的. ...
- JS作用域相关知识(#精)
在学习<你不知道的JS>一书中,特将作用域相关知识在此分享一下: #说到作用域,就不得不提到LHS查询和RHS查询: 1)如果查询目的是对变量进行赋值,则使用LHS查询 2)如果查询目的是 ...
- C#代码将html样式文件转为Word文档
首先有个这样的需求,将以下网页内容下载为Word文件. html代码: <div class="modal-body"> <div style=" ...
- Python数据结构与循环语句
# Python数据结构与循环语句: 首先编程是一项技能,类似跑步,期初不必在意细节,能使用起来就行,等学的游刃有余了再回过头来关注细节问题也不迟. 关于买书: 学会python之后,才需要买书 ...
- [ext4]空间管理 - 分配机制
在Ext4系统中,存在很多分配策略,比如预分配.多块分配.延迟分配等 Prealloc预分配 在ext4系统中,对于小文件和大文件的空间申请请求,都有不同的分配策略.对用小文件的空间请求,e ...
- 关于div+css布局值得注意的地方
注意项 我们知道,如果想要两个 div(即块级元素)挨着一起排列,可以将其设置为inline-block(行内-块元素). 不过要注意两个div内的内容的对齐方式将是垂直中间对齐,所以这时候就需要使用 ...
- Omi树组件omi-tree编写指南
Omi框架能够以少量的代码声明式地编写可拖拽移动节点的树形组件. 通常树组件能够考验UI框架的健壮性,因为需要使用到UI框架的如下特性: 组件嵌套 组件传值 组件批量传值 组件依赖自身递归嵌套(nes ...
- JavaScript高级程序设计 第三章 基本概念
ch3 基本概念 标签(空格分隔): JavaScript 语法 标识符 - 第一个字符必须是字母.下划线或美元 - 驼峰大小写格式 严格模式 ECMAScript5引入,定义了一种解析和执行模型.此 ...
- 基于jqUI的日期选择（‘yy-mm-dd’）
今天看某公司的网页,其中有个筛选条件是选择一个时间区间,从而选择出符合条件的项.什么也不说了,先看图左边的输入框,点击具体的日期,这里我选择的是2017-3-9,然后右边的输入框就只能选择这个日期以后 ...
- 你跟上技术趋势了么？ 来看看这10场2017热门it技术会议！
2016年各类大会让人应接不暇,技术圈儿最不缺的就是各种大会小会,有的纯干货,有的纯广告.作为一名技术开发者,参加了几场大会,你是不是也开始思忖:究竟哪些会议才值得参加?下面活动家为你推荐几场2017 ...