AngularJS - 使用表单和自动完成答案

【问题标题】：AngularJS - using a form and auto-completionAngularJS - 使用表单和自动完成
【发布时间】：2013-09-21 19:30:55
【问题描述】：

我在用于登录的部分页面中有以下代码...

<div class="container">
    <form autocomplete="on" data-ng-submit="checkCredentials()" class="form-signin">
        <h2 class="form-signin-heading">Login page</h2>
        <label for="email"> <b>User e-mail</b> </label>
        <input required autocomplete="on" name="email" type="text" data-ng-model="modelLogin.email" class="input-block-level" placeholder="Email address">
        <label for="pass"> <b>Password</b> </label>
        <input required autocomplete="on" name="pass" type="password" data-ng-model="modelLogin.password" class="input-block-level" placeholder="Password">
        <button style="margin-bottom:1em" class="btn btn-large btn-primary" type="submit">Log in</button>
    </form>
</div>

...这是我唯一的主页 (index.html) 中包含的 ng：

<body data-ng-controller="controllerLogin">
    <div data-ng-include="getMainpageBasedOnLoginStatus()">
    </div>
</body>

...使用 getMainpageBasedOnLoginStatus() 函数返回到上面显示的 partials/loginPage.html 或 partials/mainApplicationPage.html 的适当路径（我的主要应用入口点）。通过 ng-submit 完成的 checkCredentials() 调用执行 web 服务调用以获取登录成功/失败，并在全局模型变量中进行适当的更新 - 以便后续调用 getMainpageBasedOnLoginStatus( ) 返回“ok-you-are-logged-in”页面 (partials/mainApplicationPage.html)。

这种登录方案不能被破解，因为即使客户端代码以某种方式更改为直接指向 主应用程序 部分而不是 login 部分，服务器端也会根本无法正常运行（Web 服务请求根本无法运行并返回 406 错误）。

一切都很好 - 它有效。除了......自动填充。

请注意，我在表单和两个输入中都使用了 HTML5 属性“自动完成” - 没有任何结果。

谷歌搜索揭示了其他面临相关问题的人 (Remember Password with AngularJS and ng-submit)，但没有答案...我无法投票赞成这个问题（我还太绿了，太明智了）。

还有一张关于 AngularJS (https://github.com/angular/angular.js/issues/1460) 的公开票，有效期为 7 个月，讲述了一个相当悲惨的故事，即自动填充实际上是“工作”的，浏览器方面，对某些人来说，除了底层模型没有更新……还有一个叫做“bigbag”的人评论说，由于这个原因，该功能现在被禁用了。

从 AngularJS 的角度来看，我觉得这是相当不可接受的 - 我肯定不是第一个需要在他的应用程序表单中自动填充/自动完成的人，是吗？还是我必须放弃单页理论并恢复到讨厌的表单 action 和单独的服务器端提供的 login.html/main.html 响应以使自动填充/自动完成工作？

任何最受赞赏和迫切需要的帮助/建议...

【问题讨论】：

难以置信：发布后 2 小时，Firefox 24 出现了，自动填充工作！我想我现在也必须等待 Chrome 修复此问题...
也许你可以查看这篇关于问题的文章：timothy.userapp.io/post/63412334209/…

标签： angularjs autocomplete autofill

【解决方案1】：

这是语义上合理的 AngularJS 的替代解决方案：http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/

myApp.directive('formAutofillFix', function() {
  return function(scope, elem, attrs) {
    // Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
    elem.prop('method', 'POST');

    // Fix autofill issues where Angular doesn't know about autofilled inputs
    if(attrs.ngSubmit) {
      setTimeout(function() {
        elem.unbind('submit').submit(function(e) {
          e.preventDefault();
          elem.find('input, textarea, select').trigger('input').trigger('change').trigger('keydown');
          scope.$apply(attrs.ngSubmit);
        });
      }, 0);
    }
  };
});

然后将指令附加到表单中：

<form ng-submit="submitLoginForm()" form-autofill-fix>
  <div>
    <input type="email" ng-model="email" ng-required />
    <input type="password" ng-model="password" ng-required />
    <button type="submit">Log In</button>
  </div>
</form>

【讨论】：

我刚刚完全实现了这个指令，但它不起作用。这仍然相关吗？
可能不是，Angular 核心发生了很多变化，甚至超过了“次要”版本的颠簸，尤其是。关于他们使用的事件绑定等。我希望我能记录下这是为哪个 Angular 版本编写的，因为这几乎肯定会成为这个修复的一个因素。

【解决方案2】：

自动完成的一个好处是它保留了 $pristine 形式。

您可以做一个简单的检查，并在需要时获取值：

if($scope.[form_name].$pristine){
   var input document.getElementById([input_id]);
   var input_value = input.value
}

然后您可以提交该值或替换它，例如 $scope.[module] = input.value

【讨论】：