Let Angularjs support the browser to fill in the form automatically

Recently, many front-end students have complained that none of their login forms can record their accounts. This is a fairly common problem for single-page applications and for web pages that use more ajax.

UserApp is a WebApp built using angularjs, but he has not been able to support the browser's "save password" feature.
Here are some of the issues found:

Forms cannot be dynamically inserted into the DOM using JS.
The form must actually make a POST request. (Can't get form content and then make a request with ajax)
When the browser automatically fills out the form, $ scope cannot get the updated data.
Firefox is relatively simple. As long as the form element has a name attribute, it will automatically remind the user whether to record data after the submit event is triggered.

 

Copy the code:
<form name = "login-form" ng-submit = "login ()">
    <input id = "login" name = "login" type = "text" ng-model = "user.login">
    <input id = "password" name = "password" type = "password" ng-model = "user.password">
</ form>
 

Firefox's requirements for recording data are relatively simple

Let angularjs support browser auto-filling-angularjs browser support

However, firefox has a problem. After auto-filling the form, the data in $ scope will not be updated. So I googled and found some hacks for this problem. But I always feel that these solutions are not necessary, because all I need is to bring the data with me when submitting the form, rather than some very fast two-way data binding technology. So I used a very simple method: get the value of the form element when submitting the form.

 

Copy the code:
$ scope.login = function () {
    $ scope.user = {
        login: $ ("# login"). val (),
        password: $ ("# password"). val ()
    };
    ...
    return false;
};
 

OK, now firefox is no problem, but what about chrome?

Chrome only prompts the user whether to store the password when the form form actually initiates a POST request, but in this case, Ajax operations cannot be used.

Here is the solution:

When the form sends a Post request, intercept it with ng-submit, return false to block it, and submit the data with ajax.
When ajax returns successfully, store the session in cookies and resubmit the form aside.
When the page is reloaded, it will be found that it has been authenticated, and it will be redirected to the home page.
This will refresh the page once, but it only needs to be refreshed when logging in. Make sure that the page returns to the same address.
But if the form is dynamically added to the DOM, this method still does not work. The solution is to add a hidden form to index.html. When you need to submit data, copy the data carried by other forms into the hidden form.

I packaged it into a directive:

 

code show as below:
app.directive ("ngLoginSubmit", function () {
return {
    restrict: "A",
    scope: {
        onSubmit: "= ngLoginSubmit"
    },
    link: function (scope, element, attrs) {
        $ (element) [0] .onsubmit = function () {
            $ ("# login-login"). val ($ ("# login", element) .val ());
            $ ("# login-password"). val ($ ("# password", element) .val ());
 

            scope.onSubmit (function () {
                $ ("# login-form") [0] .submit ();
            });
            return false;
        };
    }
};
});

 

Hidden form in index.html:

 

code show as below:
<form name = "login-form" id = "login-form" method = "post" action = "" style = "display: none;">
    <input name = "login" id = "login-login" type = "text">
    <input name = "password" id = "login-password" type = "password">
</ form>
 

Temporary Login Form

 

code show as below:
<form name = "login-form" autocomplete = "on" ng-login-submit = "login">
    <input id = "login" name = "login" type = "text" autocomplete = "on">
    <input id = "password" name = "password" type = "password" autocomplete = "on">
</ form>
 

Controller for login:

 

code show as below:
$ scope.login = function (submit) {
    $ scope.user = {
        login: $ ("# login"). val (),
        password: $ ("# password"). val ()
    };
 

    function ajaxCallback () {
        submit ();
    }

    return false;
};

 

Prompt to resubmit form when refreshing

Let angularjs support browser auto-filling-360 browser auto-filling

This problem is resolved now, but whenever you press f5, the browser will remind you if you want to resubmit the form. This is really a bit painful, so I added a pre-login.html file, the hidden form will submit data here, and then redirect to index.html.

OK now ~