当浏览器预填充表单字段时，AngularJS“ng-submit”有问题吗？

Posted 2023-02-19

【中文标题】当浏览器预填充表单字段时，AngularJS“ng-submit”有问题吗？

【英文标题】：AngularJS "ng-submit" has problems when the browser pre-populates form fields?

【发布时间】：2013-06-17 07:47:06

【问题描述】：

我对 AngularJS 还很陌生，并且正在试验一个具有“登录”表单的单页应用程序。该表单由“ng-submit”绑定，如果身份验证成功，它的控制器会进行 AJAX 调用，返回一个令牌。随后的 AJAX 调用传递此令牌。 （不，我不想使用基本身份验证，因为我想要一个非 hacky 的“注销”按钮）。

我已将我的用户名和密码字段设置为“必填”，这样当用户尝试在字段中提交带有空白值的表单时，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？

【问题讨论】：

显示工具提示的不是角度，而是浏览器的一种功能。在没有任何框架或 javascript 的情况下考虑这一点：jsfiddle.net/7GvYj

有趣！在修补 AngularJS 之前，我从未使用过“必需”属性，所以我认为它是该框架的一部分。不过，就 AngularJS 显然无法识别浏览器填充的表单字段而言，最初的问题仍然存在。

你确定你的login函数根本没有被调用。

一个演示登录页面：demo.sitesdk.com/login

@Esailija：我已经确认当表单字段被预先填充时，我的“登录”控制器函数根本没有被调用。但是，一旦您对其中一个字段进行了任何手动更改，那么绑定“唤醒”并提交表单确实会调用控制器功能。

【参考方案1】：

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

【讨论】：

对我有用，我只是在我的 ng-submit 函数中调用了触发函数。

【参考方案2】：

问题来自浏览器在自动填充时没有发送任何事件。 它在 Angular 的 BT 上被报告为一个问题。

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

但我怀疑它会从 Angular 中修复，因为它更像是一个浏览器问题。

所以解决方案是做一些肮脏的黑客攻击，例如设置计时器并将模型的状态设置为“脏”或从表单触发事件。

你可以在这里看到一些尝试 AngularJS browser autofill workaround by using a directive

【讨论】：

感谢您提供的信息，我猜想是这样的。我想我只需将登录前设置为静态页面，并让登录操作将整个页面加载（即完全在 Angular 之外）加载到单页应用的页面中。