Google Chrome问题：输入类型“密码”的模型未更新，但“文本”在浏览器自动填充保存的值时执行

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>

使用角度验证对登录名和密码字段验证“登录”按钮。

在Google Chrome中（其他浏览器按预期行为）保存这些字段时（如果要保存用户名和密码功能）刷新页面时，输入类型“text” - > $ scope.loginName的模型会更新为另一方面，保存的值输入类型'password' - > $ scope.password的模型总是为空的）并且根据验证逻辑形式被声明为无效并且'Login'按钮保持禁用，即使两个输入字段都是填充了保存的信息（参见第一张附件）。

即使按键或鼠标点击发生的那一刻（不一定在输入字段上，但在网页上的任何地方），不知何故更新密码模型并验证表格，如附加的第二张图片所示。

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

任何建议，可能是将光标移动到文本字段的末尾，以便表单知道浏览器在密码字段中输入了文本？

碰到这个： AngularJS浏览器通过使用指令自动填充解决方法

注意：他在上面的解决方案中回答的所有问题都是通过.val（）或.value方法得到的输入元素值，但是在密码输入字段的情况下，棘手的部分都是未定义的。

但没有运气！

谢谢。

Answer 1

你可以用

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

这将继续跟踪模型值。 只要模型具有价值，就会触发$scope.$watch代码。

Answer 2

正如Ziv Weissman（在上面的评论部分中）所建议的那样，在浪费了相当多的时间之后，我放弃了Login按钮的AngularJs样式验证过程以及输入类型密码。

Chrome假装它没有该字段的值作为安全措施。 没有办法解决这个问题。 来自： 这里

Answer 3

我找到了这种行为的潜在解决方案 ，包括在延迟后重新捕获密码值。

Answer 4

只需添加此指令，并从输入中调用该指令

指令代码

Modeule.directive('autoComplete', function ($timeout) {
       return function (scope, iElement, iAttrs) {
           iElement.autocomplete({
               source: scope[iAttrs.uiItems],
               select: function () {
                   $timeout(function () {
                       iElement.trigger('input');
                   }, 0);
               }
           });
       };
   });

HTML代码

<input type="text" ng-model="username" auto-complete />