javascript - 谷歌浏览器问题 : Model for input type 'password' not updated but 'text' does when browser autofills saved values

Question

我有一个使用 Angular 验证进行验证的登录表单，如下所示:

输入字段的 HTML:

                                <input id="loginName" name="loginName" type="text" class="form-control" placeholder="Username" data-ng-model="loginName" data-ng-maxlength="246" required>

                                <input id="password" name="password" type="password" class="form-control" placeholder="Password" data-ng-model="password" data-ng-maxlength="246" required>

“登录”按钮使用 Angular 验证针对登录名和密码字段进行验证。

在谷歌浏览器中(其他浏览器按预期运行)当这些字段被保存时(是否要保存用户名和密码功能)当页面刷新时，输入类型'文本'的模型 -> $scope.loginName另一方面，使用保存的值更新输入类型“密码”的模型 -> $scope.password 始终为空)并且根据验证逻辑表单被声明为无效并且“登录”按钮保持禁用状态，即使两者输入字段填充了已保存的信息(请参见第一张图片)。

甚至发生按键或鼠标点击(不一定是在输入字段上，而是在网页上的任何地方)的那一刻，密码模型就会以某种方式更新并验证表单，如所附的第二张图片所示。

我尝试使用自动对焦、自定义自动对焦指令、超时，但它似乎没有按预期工作。

有什么建议，可能是将光标移动到文本字段的末尾，以便表单知道文本已由浏览器输入到密码字段中？

遇到这个:AngularJS browser autofill workaround by using a directive

注意:他在上述解决方案中的所有回答都谈论输入元素值，通过 .val() 或 .value 方法获得，但棘手的部分是在密码输入字段的情况下都返回未定义。

但是没有运气!

谢谢。

Answer 1

你可以使用

$scope.$watch('modelValue',function(newVal,oldVal){
    //your code action
});

它将继续跟踪模型值。只要模型有值(value)，您在 $scope.$watch 中的代码就会被触发。