1

I have a very basic username/password field, and it's bound via ng-model to two properties on my controller. They are set up like this:

    loginModel = {
        username: '',
        password: ''
    };

They are bound to input elements like so:

input(autocomplete="off" data-original-title="The email you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The UserName field is required." name="UserName" placeholder="Email" required="required" type="email" value="" ng-model="signInVm.loginModel.username" ng-change="signInVm.checkForm()" am-autofocus)

input.inspectletIgnore(data-original-title="The password you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The Password field is required." name="Password" placeholder="Password" required="required" type="password" value="" ng-model="signInVm.loginModel.password" ng-change="signInVm.checkForm()")

I have a submit button that checks to see if the username and password field are filled out to determine if it is disabled or not via ng-disasbled

button.btn.btn-secondary.btn-signin(type="submit" ng-disabled="!signInVm.canSubmit" ng-click="signInVm.tryLogin()" ng-if="!signInVm.isLoggingIn") Sign In

The problem I am having is that, when the page loads and Chrome autofills the two fields, it still seems to think those two fields are empty and so the submit button is disabled despite the form seemingly being filled out properly. Once you do anything on the page, like click anywhere or hit something on the keyboard, the fields detect the autofilled data and then the submit button becomes active.

I think this is because the fields are defined as '' initially, because if I set the values to something else (e.g. hello@world.com) then the button will be active... but then the fields will be prepopulated with the hardcoded data in the controller intead of autofill. I can't think of any way around this. I want the fields to be empty by default, but if they are autofilled I want the code to recognize this immediately and make the submit button active without me having to interact with the browser first. Is there any way to do this? I feel like there must be an incredibly simple solution I am missing, but I really can't think of it despite my best efforts.

Hopefully my question makes sense. Thank you for your help!

jBuchholz
  • 1,742
  • 2
  • 17
  • 25
Peter Rao
  • 21
  • 1
  • 3
  • please tell me, where you are updating the "signInVm.canSubmit" in your controller. – Vaibhav Gattyani May 29 '20 at 06:52
  • @VaibhavGattyani there is an ng-change on both inputs that calls a function `checkForm()` that does this: ```checkForm() { this.canSubmit = this.validateEmail(this.loginModel.username) && this.loginModel.password.length > 0; }``` the `validateEmail` function just does a basic regex comparison to check if the email has an `@` and a `.`. – Peter Rao May 29 '20 at 14:36
  • when the data is automatically filled in the fields in starting then call "checkForm()" function in your controller manually. i think this will solve your problem. – Vaibhav Gattyani May 29 '20 at 15:22
  • @VaibhavGattyani I have a call to `checkForm()` in the constructor and unfortunately it doesn't work, even if I add a timeout. I put a console log inside `checkForm()` to see what those properties are when it is called, and they initially present as empty strings. It seems like setting the model to an empty string in the controller takes precedence over the autofill. Once the browser window is interacted with in any way (including clicking on the disabled submit button, which shouldn't fire any sort of event in Chrome) the autofill is detected and all is well. Ideally it should work on load – Peter Rao May 29 '20 at 16:06
  • If it helps, the number are really small when the page loads, then get back to normal size when the autofill is actually detected by the code. Also, it only happens about 70% of the time... there are times when the autofill works as intended from the the get go. – Peter Rao May 29 '20 at 16:18
  • I also got this issue on my form and i am trying to solve it. Meanwhile you can check this: [Detecting Browser Autofill](https://stackoverflow.com/questions/11708092/detecting-browser-autofill). Maybe this will help you. – Vaibhav Gattyani May 30 '20 at 02:24

0 Answers0