1

Note that in the image below the fields with a yellow background were auto-filled by Chrome (or maybe by Lastpass)

I have a login widget that I've created in Angular, and it works great. One problem that I've had though, is that if I define the email text field like:

<input type="email" ng-model='user.email' name="email" required>

I will get a form.email.$error.required error if I submit with a browser inserted value as shown below. Also, the user object will not have a value for email unless i modify that defaulted text.

I can manually search the DOM for the value of that input, but that's not a very Angular way to solve this issue. My other option is to create my own input directive that initializes the input by checking if there is a value on the DOM. But I'm wondering if there is a quicker workaround.

Login Widget

Jeremy Smith
  • 14,727
  • 19
  • 67
  • 114
  • What do you mean with "browser inserted value"? – Mike Robinson Dec 13 '13 at 17:22
  • @MikeRobinson I think the OP means the autocomplete feature of the browser. – Davin Tryon Dec 13 '13 at 17:25
  • 1
    That's because angular model is updated only on "input" event and when browser's autocomplete script fills out the fields, this event is not fired. Check out this answer: http://stackoverflow.com/a/17110709/1095616. Basically you should be able to handle this by applying custom directive to each of your fields and triggering `input` event inside $timeout. – Stewie Dec 13 '13 at 17:34
  • http://stackoverflow.com/a/11710295/896341 – Stefan Dec 13 '13 at 18:37

1 Answers1

1

Maybe I'm not understanding your problem, but isn't this just a matter of using $scope.$apply(), first thing in your submit function?

https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply()

jsplaine
  • 612
  • 5
  • 16