20

在 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做任何事情。

4

5 回答 5

11

您的代码是可以的，但是您需要将名称属性添加到您的输入字段中，例如：

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

和

<input type="password" name="password" ...>
于 2013-09-20T13:18:37.817 回答
6

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

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

于 2013-12-13T12:50:59.753 回答
2

您的表单 HTML 有点混乱。

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

提交表单时，您希望它去/#/dashboard/login还是做ng-submit="login()"？目前，ng-submit 被忽略以支持表单操作。如果您希望它/#/dashboard/login作为新页面进入，则只需删除ng-submitandonsubmit属性即可正常工作。

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

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

于 2013-09-03T08:18:27.597 回答
2

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

因此，只需为登录表单以及用户名和密码提供名称属性，它似乎在 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：我用的是 ChromeVersion 45.0.2454.93 m

于 2015-09-17T02:23:18.130 回答
0

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

于 2013-09-03T08:07:31.680 回答