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 />