当浏览器预先填充表单字段时,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 浏览器自动填充解决方法使用指令