javascript - AngularJS "ng-submit" has problems when the browser pre-populates form fields? - Stack Overflow

admin管理员组

文章数量:1277901

I'm fairly new to AngularJS, and am experimenting with a single-page application having a "login" form. The form is bound by "ng-submit", and its controller makes an AJAX call returning a token if authentication was successful. Subsequent AJAX calls pass this token. (No, I DON'T want to use basic auth, because I want a non-hacky "logout" button).

I have setup my username and password fields with "required", so that AngularJS will display a tooltip when users try to submit the form with a blank value in a field:

<form name="loginForm" ng-submit="login()">
    <fieldset>
        <legend>Sign In</legend>
        <label>Email</label>
        <input name="loginEmail" type="text" placeholder="Registered email address…" ng-model="loginEmail" required>
        <label>Password</label>
        <input name="loginPassword" type="password" placeholder="Password…" ng-model="loginPassword" required>
        <br/>
        <button type="submit" class="btn">Login</button>
    </fieldset>
</form>

The issue arises when some browsers (Firefox, at least) asks whether the user wants the browser to remember the username and password, and pre-populate it next time.

When the browser populates either of these fields, AngularJS basically stops working. The "ng-submit"-bound form will not submit... the bound controller function isn't invoked at all. My first thought was that the pre-populated fields didn't trigger an event, so AngularJS thinks they're still blank. However, there are no tooltips popping up to warn about blank fields. It's like AngularJS just pletely shut down.

Strangely, as soon as you make ANY manual edit to either field, AngularJS es back to life... validation tooltips and form submission start working again.

Is there a bug here, or is the problem with lack of knowledge on my end? How can you make AngularJS recognize browser-populated fields? Or if there are problems in this area, how can you prevent the browser from pre-populating fields so they don't interfere with AngularJS?

I'm fairly new to AngularJS, and am experimenting with a single-page application having a "login" form. The form is bound by "ng-submit", and its controller makes an AJAX call returning a token if authentication was successful. Subsequent AJAX calls pass this token. (No, I DON'T want to use basic auth, because I want a non-hacky "logout" button).

I have setup my username and password fields with "required", so that AngularJS will display a tooltip when users try to submit the form with a blank value in a field:

<form name="loginForm" ng-submit="login()">
    <fieldset>
        <legend>Sign In</legend>
        <label>Email</label>
        <input name="loginEmail" type="text" placeholder="Registered email address…" ng-model="loginEmail" required>
        <label>Password</label>
        <input name="loginPassword" type="password" placeholder="Password…" ng-model="loginPassword" required>
        <br/>
        <button type="submit" class="btn">Login</button>
    </fieldset>
</form>

The issue arises when some browsers (Firefox, at least) asks whether the user wants the browser to remember the username and password, and pre-populate it next time.

When the browser populates either of these fields, AngularJS basically stops working. The "ng-submit"-bound form will not submit... the bound controller function isn't invoked at all. My first thought was that the pre-populated fields didn't trigger an event, so AngularJS thinks they're still blank. However, there are no tooltips popping up to warn about blank fields. It's like AngularJS just pletely shut down.

Strangely, as soon as you make ANY manual edit to either field, AngularJS es back to life... validation tooltips and form submission start working again.

Is there a bug here, or is the problem with lack of knowledge on my end? How can you make AngularJS recognize browser-populated fields? Or if there are problems in this area, how can you prevent the browser from pre-populating fields so they don't interfere with AngularJS?

• javascript
• angularjs

Share Improve this question Follow asked Jun 20, 2013 at 12:40 Steve PerkinsSteve Perkins 11.9k1919 gold badges6767 silver badges9898 bronze badges 5

• It is not angular that displays the tooltip but a functionality of the browser. Consider this without any frameworks or javascript at all: jsfiddle/7GvYj – Esailija Commented Jun 20, 2013 at 12:46
• Interesting! I had never used the "required" attribute before tinkering with AngularJS, so I assumed it was part of that framework. The original question still stands though, in terms of AngularJS apparently not recognizing browser-populated form fields. – Steve Perkins Commented Jun 20, 2013 at 12:57
• are you sure your login function is not called at all. – Esailija Commented Jun 20, 2013 at 13:03
• A demo login page: demo.sitesdk./login – Grief Coder Commented Jun 20, 2013 at 13:31
• @Esailija: I have confirmed that my "login" controller function is NOT called at all when the form field(s) are pre-populated. However, once you make any manual change whatsoever to one of the field, then the binding "wakes up" and submitting the form DOES invoke the controller function. – Steve Perkins Commented Jun 20, 2013 at 14:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

$(window).load(function() {
  // updates autofilled fields
  window.setTimeout(function() {
    $('input[ng-model]').trigger('input');
  }, 100);
});

The issue es from the fact the the browser doesn't send any events on auto fill. It was reported as an issue on Angular's BT.

https://github./angular/angular.js/issues/1460

But I doubt it will be fixed from Angular since its more a browser issue.

So the solution is to do some dirty hacks like setting a timer and set the model's state to 'dirty' or trigger events from the form.

You can see some attempts here AngularJS browser autofill workaround by using a directive

本文标签： javascriptAngularJS quotngsubmitquot has problems when the browser prepopulates form fieldsStack Overflow