带有scope.$watch的Angular指令强制验证其他字段

2024-01-15

我写了一个match-model当用户在我的应用程序中注册时,我用于密码/密码重复过程的角度指令。密码重复字段具有此特定属性,可根据原始密码字段验证此字段。

我的指令有scope.$watch出于优化目的,因为我不必每次验证重复密码范围属性时都读取相关范围属性值,但我宁愿只使用缓存值,该值会在相关范围属性值更改(原始密码)时更改。

这是我的指令:

.directive("matchModel", ["$timeout", function ($timeout) {
    return {
        require: "ngModel",
        link: function (scope, element, attributes, ngModelController) {

            var valueCache = null;

            // watch "match-model" model property value
            scope.$watch(attributes["matchModel"], function (newValue, oldValue) {
                valueCache = newValue;
                /*
                scope.$apply(); // error $digest in progress
                $timeout(function () { scope.$digest(); }); // no error, not working
                $timeout(function () { scope.$apply(); }); // no error, not working
                */
            });

            // add model validation parser
            ngModelController.$parsers.unshift(function (value) {
                ngModelController.$setValidity("match", value === valueCache);
                return value === valueCache ? value : undefined;
            });
        }
    };
}]);

我的表单包含两个字段(与此问题相关):

<input type="password" name="password" id="password" placeholder="password"
       class="validate" autocomplete="off"
       required
       ng-minlength="6"
       ng-model="data.password" />
<input type="password" name="passwordRepeat" id="passwordRepeat" placeholder="repeat password"
       class="validate" autocomplete="off"
       required
       ng-model="data.passwordRepeat"
       match-model="data.password" />

要求

  1. 当用户输入第一个密码时,输入足够的字符后字段将变得有效 - 在上述情况下为 6 个字符
  2. 当用户输入第二个密码时,当数据与第一个密码匹配时,字段应变为有效
  3. 如果用户返回第一个字段并更改原始密码,则第二个字段应无效

目前如何运作

1 和 2 按预期工作,但 3 没有。这就是为什么我想添加scope.$digest将范围模型更改传播到其他字段。和scope.$watch是正确的时机,因为它在特定范围模型属性更改时执行。

看起来scope.$digest (or scope.$apply就此而言)不验证模型。验证似乎没有随之执行。

Question

那么我应该怎么做scope.$validate甚至更好element.$validate所以它只会验证我的特定字段而不是整个模型(导致用户界面中的形式无效)。


我会通过显式验证 $viewValue 来做到这一点$watch:

PLUNKER http://plnkr.co/edit/YnxDDAUCS2K7KyXT1AXP?p=preview

app.directive("matchModel", [
  function () {
    return {
      require: "ngModel",
      link: function (scope, element, attributes, ngModelController) {

        var valueCache = null;

        scope.$watch(attributes["matchModel"], function (newValue, oldValue) {
          valueCache = newValue;
          validate(ngModelController.$viewValue);
        });

        var validate = function (value) {
          ngModelController.$setValidity("match", value === valueCache);
          return value === valueCache ? value : undefined;
        };

        ngModelController.$parsers.unshift(validate);
      }
    };
}]);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有scope.$watch的Angular指令强制验证其他字段 的相关文章

  • 邮件附件媒体类型错误 Gmail API

    我正在尝试通过 Javascript 客户端中的 Gmail API 发送带有附加 jpeg 文件的消息 到目前为止我写的代码如下 ajax type POST url https www googleapis com upload gma
  • 如何制作像Stackoverflow一样的可折叠评论框

    我正在构建一个网站 并且有一个状态更新列表 我希望允许用户为列表中的每个项目撰写评论 但是我正在尝试实现一个类似于堆栈溢出工作方式的用户界面 特别是可折叠的评论表单 列表 用户在其中单击对列表中的特定状态更新添加评论 并且在列表中的该项目下
  • ExtJS 4:克隆商店

    我正在尝试找出如何克隆Ext data Store不保留旧的参考 让我用一些代码更好地解释一下 这是源商店 var source Ext create Ext data Store fields name age data name foo
  • 捕获外部脚本文件中的 javascript 错误

    我有一点 JavaScript Jquery 工具的叠加层 http flowplayer org tools overlay index html 当放到错误使用它的页面上时可能会引发异常 我正在尝试优雅地处理它 我有一个通用的 wind
  • 未捕获类型错误:无法解析模块说明符“fs”。相对引用必须以“/”、“./”或“../”开头

    当我尝试在我自己的模块中导入 fs 模块时 例如import as fs from fs 浏览器控制台出现以下错误 Uncaught TypeError Failed to resolve module specifier fs Relat
  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右
  • 代码点火器 JSON

    你好 我使用 codeigniter 然后我从控制器中的数据库中回显输出 然后在我的视图文件中执行以下操作 但它没有显示任何内容 S 我的模型文件 function forumList this gt db gt select oversk
  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗
  • 如何向尚未添加到页面的元素注册 Javascript 事件处理程序

    我正在尝试构建一个greasemonkey 脚本 它将根据用户与其他动态创建的数据表的交互动态创建数据表 我的问题是 每次创建表时 我都必须进行两次传递 一次用于创建表 另一次用于获取表中我想要添加事件处理程序的所有对象 通过 id 并添加
  • 使用 ES6 模块导出/导入单个类方法?

    假设我有一个像这样的简单课程fileA js class foo constructor x this name x fooMethod x return x hello 我想导入并使用fooMethod in fileB js像这样 im
  • 根据用户是否经过身份验证隐藏或显示链接 - AngularJs

    我目前正在研究一个AngularJS应用程序中 我遇到了以下障碍 我们有一个login当用户提交页面时 我们调用 Web api 并对用户进行身份验证 我们目前正在使用声明身份验证来设置 cookie 等 这些内容按预期工作 但是我遇到的问
  • t /= d 是什么意思? Python 和错误

    t current time b begInnIng value c change In value d duration def easeOutQuad swing function x t b c d alert jQuery easi
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • 对数字和字母元素的数组进行排序(自然排序)

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注
  • 在外部单击时关闭弹出 div

    我有一个弹出 div 仅在单击特定按钮时显示 单击同一按钮时它甚至会隐藏 我的问题是 我还想在单击外部任何地方时隐藏 div 我无法这样做 因为弹出 div 位于主包装类内部 并且无法通过在包装类上使用 click 事件并使其隐藏来做到这一
  • chrome 扩展 - 将数据从后台传递到自定义 html 页面

    创建浏览器扩展 我必须从 background js 打开新选项卡并将 JSON 数据传递到这个新选项卡 在新选项卡中 我使用传递的 JSON 数据来操作 渲染 DOM 下面是我的 background js 的一部分 我在其中使用自定义
  • while 循环元素状态 cypress

    我有一个问题 我想单击一个按钮直到它消失 但次数可能会有所不同 所以我想检查可见性状态 当可见 true时单击按钮 当可见 false时结束测试 但问题是我不知道如何循环从获取元素到末尾的所有链 单击按钮一次 由于中断而停止 如果我删除中断
  • 优化正则表达式以过滤数千个 HTML 选择选项

    背景 我开发了一个基于 jQuery 的穿梭小部件 https stackoverflow com a 13557000 59087对于 HTMLselect元素 因为我找不到一个经过最低限度编码并提供正则表达式过滤器来补偿的元素变音符号
  • 从 Node.js 调用 execl、execle、execlp、execv、execvP 或 execvp 的方法

    POSIX 系统公开了一系列exec函数 允许人们将可能不同的东西加载到当前进程中 保留打开的文件描述符 进程标识符等 可以出于多种原因执行此操作 在我的情况下 这是引导 我想更改我自己的进程的命令行选项 然后在现有进程上重新加载它 这样就
  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns

随机推荐

  • 与 .net 和 mono 一起使用的最佳对象关系映射框架?

    我正在为我的学位项目做一些研究 使用 net3 5 和 mono2 0 开发的多平台应用程序 我需要一些关于你们认为最好的对象关系映射框架的意见 该框架也可以与单声道运行 此外 任何有关哪种 ROM 最适合我的项目的意见都会很方便 简单思考
  • Javafx:没有工具包发现异常

    我已在 intellij 插件中添加了 javafx 库 以添加 jfxwebview 但是当我尝试创建 JFXPanel 对象时 JFXPanle jfxpanel new JFXPanel 它给出了以下异常 No toolkit fou
  • 字典中的特征数量

    我正在努力从这样的 pickle 文件加载数据集 Load the dictionary containing the dataset with open final project dataset pkl r as data file d
  • Marklogic 中的 JavaScript 多语句事务

    我想在 marklogic 中的服务器端 JavaScript 中编写多语句事务 我想要实现的是 执行更新事务 然后编写查询语句来查询更新的文档并确认更新在事务中可见 最后进行回滚 通过进行回滚 我想确认事务内进行的更新在事务外不可见 而在
  • 如何获取函数参数列表(以便我可以删除函数)

    我想让 SQL 删除 PostgreSQL 中的一个函数 我写的DROP FUNCTION以及从中获取函数名称pg proc 那不是问题 但是 如果我保留空白参数 它不会删除该函数 我检查了手册 里面写着我必须识别该函数及其参数才能删除它
  • 带有字母范围的 PATINDEX 排除变音符号(重音字符)

    我试图弄清楚如何使用 patindex 来查找一系列字母字符 但排除重音字符 如果我进行直接搜索 使用默认排序 不敏感 就可以了 但是 当我搜索一系列字母时 它将匹配重音字符 SELECT IIF U COLLATE Latin1 Gene
  • C#变量到sql命令

    string alpha this is text string sql INSERT INTO dokimastikospinakas pliroforia VALUES alpha 将 C 变量传递到 sql 命令的正确语法是什么 这只
  • SQL 中的变量“IN”表达式[重复]

    这个问题在这里已经有答案了 可能的重复 SQL 多个参数值 https stackoverflow com questions 694536 sql multiple parameter values SQL Server 2008 将 A
  • require_once(Google/Auth/AssertionCredentials.php):无法打开流:没有这样的文件或目录

    我正在尝试做一个非常简单的事情 require once vendor google src Google Client php require once vendor google src Google Service Plus php
  • 如何将自定义 HTML 类名称添加到管理屏幕子菜单项?

    这是下面的这些子菜单项Posts menu 我检查了代码 发现它的标记是这样的 ul class wp submenu wp submenu wrap li class wp submenu head Posts li li class w
  • 必须创建一个matlab计数器[重复]

    这个问题在这里已经有答案了 Q 从 0 limit 1 创建一个 计数器 例如 如果您选择 3 它将显示 0 1 2 计数器的长度不是在程序中确定的 应该在运行时确定 并且输入可以彼此不同 不太确定你的意思 但是 for i 0 limit
  • 带有渐变的CSS3动画[重复]

    这个问题在这里已经有答案了 难道真的没有办法用 CSS 来制作渐变背景的动画吗 就像是 webkit keyframes pulse 0 background webkit gradient linear left top left bot
  • Android 虚拟设备 - Armeabi-v7a 与 x86_64

    我想制作自己的 Android 应用程序 我正在使用 Ubuntu 64 位和 IntelliJ 在虚拟设备配置中 它要求我选择系统映像 所有选项都有一个Download另外 这意味着我还没有下载任何系统映像 有 3 个选项可供选择Loll
  • grep 排除多个字符串

    我正在尝试使用查看日志文件tail f并想要排除包含以下字符串的所有行 Nopaging the limit is and keyword to remove is 我可以像这样排除一个字符串 tail f admin log grep v
  • 如何在 Cloud Machine Learning Engine 上获取模型的 C# 在线预测?

    我已成功部署在 Cloud ML Engine 上的模型上 并验证它正在使用gcloud ml engine models predict依照指示说明 https cloud google com ml engine docs how to
  • 在bash中将字符插入字符串?

    我需要转动绳子 125959 into 12 59 59 显然 字符串是时间 所以正则表达式在这里不太好 time 125959 echo time 0 2 time 2 2 time 4 2
  • 并发程序中的 I/O

    我正在开发一个并发程序 它有两个线程 其中一个监听来自服务器的消息 另一个线程向服务器发送消息 我需要从用户获取命令 使用 cin 并同时显示来自服务器的消息 我该如何处理这种情况 问题是 如果我在收到消息时读取用户的命令 则用户的输入会被
  • Mesa + Linux:gl.h 不包含现代 OpenGL

    这是我目前使用的环境 Eclipse Luna Linux Mint Rebecca 上的 C 11 当我尝试使用现代 OpenGL 例如 VAO 或 VBO 时 我收到编译器错误 导致方法无法解析 例如 GLuint VaoID GLui
  • F# 中 Control.Observable 和 Control.Event 模块之间有哪些相似/差异?

    F 至少在 Visual Studio 2012 中 两者兼而有之Control Observable http msdn microsoft com en us library ee370313 v vs 110 aspx and Con
  • 带有scope.$watch的Angular指令强制验证其他字段

    我写了一个match model当用户在我的应用程序中注册时 我用于密码 密码重复过程的角度指令 密码重复字段具有此特定属性 可根据原始密码字段验证此字段 我的指令有scope watch出于优化目的 因为我不必每次验证重复密码范围属性时都