Remember Password with AngularJS and ng-submit

Question

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

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-submit is doing anything.

This is an issue with dynamically generated forms (in any framework). — smhg, Dec 02 '13 at 20:36
Note that some browsers in private mode won't show de remember password dialog (in my case the problem was that I tested with Firefox private browsing). — Márton Tamás, Nov 11 '16 at 20:58

score 11 · Answer 1 · answered Sep 20 '13 at 13:18

11

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

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

and

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

answered Sep 20 '13 at 13:18

SiCN

1,052
8
17

The name attributes, if you look at code in the question, are present. Without name attributes, there wouldn't be any completion in regular (non-JS-generated) forms either. – smhg Dec 02 '13 at 17:04

score 6 · Accepted Answer · edited May 23 '17 at 12:32

6

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.

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.

edited May 23 '17 at 12:32

Community

1
1

answered Dec 13 '13 at 12:50

soelu

574
1
5
13

score 2 · Answer 3 · edited May 23 '17 at 12:10

Your form HTML is a bit confusing.

<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/login or 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/login as a new page, then just remove the ng-submit and onsubmit attributes and it will work as normal.

If you want it to do ng-submit="login()", then remove the action and onsubmit attributes. 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.

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.

I just added the action to get the browser to recognise the form and trick it into remembering the password. the form works without the action. the onsubmit="return false;" prevents the execution of the action. only the ng-submit is doing anything. — soelu, Sep 03 '13 at 09:13

diegosasw · Answer 4 · 2015-09-17T02:38:29.957

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.

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:

<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: I'm using Chrome Version 45.0.2454.93 m

score 0 · Answer 5 · answered Sep 03 '13 at 08:07

0

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.

answered Sep 03 '13 at 08:07

August Lilleaas

54,010
13
102
111

the form works without the action and without the onsubmit handler. but still no remember password prompt. – soelu Sep 03 '13 at 09:17
When you have an action" attribute, the ng-submit doesn´t work! Quote from AngularJS API Ref: "For this reason, Angular prevents the default action (form submission to the server) unless the
element has an action attribute specified."
– Fernando Vieira Jun 25 '14 at 13:57

Remember Password with AngularJS and ng-submit

UPDATE

5 Answers5

Linked