Question

在AngularJS单页面应用程序中使用ng-submit时，如何让浏览器要求用户记住密码。

我的表格：

<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
    <input type="text" required id="username" name="username" ng-model="username" autocomplete="on" placeholder="Username" value="">
    <input type="password" required id="password" name="password" ng-model="password" autocomplete="on" placeholder="Password" value="">
    <button type="submit" class="btn">Submit</button>
</form>

任何想法？

更新

我刚刚添加了操作，让浏览器识别表单并诱骗它记住密码。（显然没有用。）表单在没有动作的情况下工作正常。 onsubmit="return false;"阻止执行操作。只有ng-submit正在做任何事情。

Answer 1

您的代码没问题，但您需要在输入字段中添加名称属性，例如：

<input type="text" name="username" ...>

和

<input type="password" name="password" ...>

Answer 2

问题是动态生成的登录表单。将表单放入index.html后，它按预期工作。我想这是一个安全问题。

然后发生的问题是ngModels没有在自动填充上更新。经过一番搜索后，我找到了解决该问题的解决方案here。在AngularJS 1.2+中，这应该是固定的。

Answer 3

您的表单HTML有点令人困惑。

<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">

提交表单时，您是希望它转到/#/dashboard/login还是ng-submit="login()"？目前，ng-submit被忽略，支持表单操作。如果您希望将其作为新页面转到/#/dashboard/login，那么只需删除ng-submit和onsubmit属性，它就会正常工作。

如果您想要ng-submit="login()"，请删除action和onsubmit属性。当具有ng-submit的表单也没有action属性时，Angular会自动阻止表单提交。这样做会停止浏览器记住密码提示，因为表单实际上并未在任何地方提交。我想这是一个浏览器还没有赶上单页应用程序时代的领域，我没有直接解决它的问题。

解决方法是在HTML中使用单独的隐藏表单，将用户名/密码设置为与用户在主窗体中输入的相同，然后在ng-的同时将该隐藏表单提交给iframe提交被称为 - 请查看How can I get browser to prompt to save password?，了解有关如何执行此操作的建议。

Answer 4

我没有做任何特别的事情。但是我注意到虽然MS Edge和Firefox运行良好，并提出要记住Chrome没有的凭据。

因此，只需在登录表单以及用户名和密码中提供name属性，它似乎在Chrome中运行正常。自动填充功能也已开启。例如：

<form method="post" class="form-horizontal well" ng-submit="login()">
        <div class="form-group">
            <label class="col-sm-4 control-label">Email Address</label>
            <div class="col-sm-8">
                <input name="username" ng-model="email" type="email" class="form-control" placeholder="user@example.com" autofocus="autofocus" autocomplete="on" required />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">Password</label>
            <div class="col-sm-8">
                <input name="password" ng-model="password" type="password" autocomplete="on" class="form-control" required />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-8">
                <button type="submit" class="btn btn-primary">Log on</button>
            </div>
        </div>
    </form>

PS：我正在使用Chrome Version 45.0.2454.93 m

Answer 5

罪魁祸首是“回归假”; on onsubmit。删除它，你很高兴去。 ng-submit负责处理剩下的事情，例如当您在字段中输入时没有实际提交表单或单击提交按钮。

使用AngularJS和ng-submit记住密码

更新

5 个答案: