javascript 使用 AngularJS 和 ng-submit 记住密码

Remember Password with AngularJS and ng-submit

提问by soelu

How do I get the browser to ask the user to remember the password when using ng-submit in an AngularJS single page application.

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

My Form:

我的表格：

<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>

Any Ideas?

有任何想法吗？

---

---

UPDATE

更新

I just added the action to get the browser to recognise the form and trick it into remembering the password. (which obviously didn't work.) The form works fine without the action. The onsubmit="return false;"prevents the execution of the action. Only the ng-submitis doing anything.

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

采纳答案by soelu

The problem is the dynamically generated login form. After putting the form into the index.html it worked as expected. I guess this is a security issue.

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

The problem that then occurred was that the ngModels didn't get updated on autofill. After some searching I found the solution to that problem here. In AngularJS 1.2+ this is supposed to be fixed.

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

回答by SiCN

Your code is ok, but you need to add the name attributes to your inputfields, such as:

您的代码没问题，但您需要将 name 属性添加到您的输入字段，例如：

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

and

和

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

回答by diegosasw

I didn't have to do anything special. But I noticed that while MS Edge and Firefox worked well and offered to remember credentials Chrome didn't.

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

So simply by providing name attribute to the login form and to username and password it seemed to work fine in Chrome. Autocomplete is on as well. Example:

因此，只需为登录表单以及用户名和密码提供 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="[email protected]" 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: I'm using Chrome Version 45.0.2454.93 m

PS：我用的是 Chrome Version 45.0.2454.93 m

回答by mikel

Your form HTML is a bit confusing.

您的表单 HTML 有点混乱。

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

When the form is submitted do you want it to go to /#/dashboard/loginor do ng-submit="login()"? At the moment, the ng-submit is being ignored in favour of the form action. If you want it to go to /#/dashboard/loginas a new page, then just remove the ng-submitand onsubmitattributes and it will work as normal.

当表单被提交时，你想让它去/#/dashboard/login还是做ng-submit="login()"？目前，ng-submit 被忽略以支持表单操作。如果您希望它/#/dashboard/login作为一个新页面进入，那么只需删除ng-submit和onsubmit属性，它就会正常工作。

If you want it to do ng-submit="login()", then remove the actionand onsubmitattributes. Angular automatically prevents form submission when a form with ng-submit does not have an action attribute too. Doing it this way will stop the browser remember password prompt as the form isn't actually submitted anywhere. I guess this is an area where browsers have yet to catch up to the era of the single page application, there's no direct fix for it that I'm aware of.

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

A workaround would be to have a separate hidden form in the HTML, set the username/password there to the same as the user enters in main form, and then submit that hidden form to an iframe at the same time as ng-submit is called - have a look at How can I get browser to prompt to save password?for ideas about how to do it.

一种解决方法是在 HTML 中有一个单独的隐藏表单，将用户名/密码设置为与用户在主表单中输入的相同，然后在调用 ng-submit 的同时将该隐藏表单提交到 iframe - 看看如何让浏览器提示保存密码？有关如何做到这一点的想法。

回答by August Lilleaas

The culprit is "return false;" on onsubmit. Remove that, and you're good to go. ng-submit takes care of the rest, such as not actually submitting the form when you hit enter in a field or click the submit button.

罪魁祸首是“返回假”；在提交时。删除它，你就可以开始了。ng-submit 负责其余的工作，例如当您在字段中按 Enter 键或单击提交按钮时实际上不提交表单。