當瀏覽器預先填充表單字段時，AngularJS“ng-submit”有問題嗎？

Question

我是AngularJS的新手，我正在嘗試使用“登錄”表單的單頁應用程序。 表單由“ng-submit”綁定，並且如果身份驗證成功，其控制器會發出一個AJAX調用返回一個令牌。 后續的AJAX調用會傳遞此令牌。 （不，我不想使用基本身份驗證，因為我想要一個非hacky“注銷”按鈕）。

我已將用戶名和密碼字段設置為“required”，以便當用戶嘗試在字段中提交帶有空白值的表單時，AngularJS將顯示工具提示：

<form name="loginForm" ng-submit="login()">
    <fieldset>
        <legend>Sign In</legend>
        <label>Email</label>
        <input name="loginEmail" type="text" placeholder="Registered email address…" ng-model="loginEmail" required>
        <label>Password</label>
        <input name="loginPassword" type="password" placeholder="Password…" ng-model="loginPassword" required>
        <br/>
        <button type="submit" class="btn">Login</button>
    </fieldset>
</form>

當某些瀏覽器（至少是Firefox）詢問用戶是否希望瀏覽器記住用戶名和密碼，並在下次預先填充它時，會出現問題。

當瀏覽器填充其中任何一個字段時，AngularJS基本上停止工作。 “ng-submit”綁定表單將不會提交...根本不會調用綁定控制器函數。 我的第一個想法是，預先填充的字段沒有觸發事件，因此AngularJS認為它們仍然是空白的。 但是，沒有彈出工具提示來警告空白字段。 就像AngularJS完全關閉一樣。

奇怪的是，只要你對任一字段進行任何手動編輯，AngularJS就會恢復生機......驗證工具提示和表單提交再次開始工作。

這里有錯誤，還是我的知識缺乏問題？ 如何讓AngularJS識別瀏覽器填充的字段？ 或者，如果此區域存在問題，您如何阻止瀏覽器預先填充字段，以免它們干擾AngularJS？

Answer 1

$(window).load(function() {
  // updates autofilled fields
  window.setTimeout(function() {
    $('input[ng-model]').trigger('input');
  }, 100);
});

Answer 2

問題來自於瀏覽器不會在自動填充時發送任何事件。 它被報道為Angular的BT問題。

https://github.com/angular/angular.js/issues/1460

但我懷疑它將從Angular修復，因為它更多的是瀏覽器問題。

所以解決方案是做一些骯臟的黑客攻擊，比如設置一個計時器並將模型的狀態設置為'臟'或從表單觸發事件。

您可以通過使用指令在此處看到AngularJS瀏覽器自動填充解決方法的一些嘗試