AngularJS ng-disabled does not work on submit using Chrome autofill form

I am new to AngularJS and I am trying to create a simple form. I have a submit button to disable if the form is invalid (all fields are blank). It works fine except for Chrome when autocomplete is enabled. The fields are pre-filled, but the submit button is still disabled until I clicked somewhere (somewhere, such as input fields, blank space, etc.) on the page.

I don’t know how I can provide a working example reproducing a Chrome script, but here JSFiddle (and the code below) is ng-disabled.

Jsfiddle

<div ng-app="">
  <form name="myForm">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" ng-model="formData.username" required />
    <span ng-show="myForm.username.$error.required && myForm.username.$dirty">Required</span>


    <label for="password">Password</label>
    <input type="password" id="password" name="password" ng-model="formData.password" required />
    <span ng-show="myForm.password.$error.required && myForm.password.$dirty">Required</span>
    <br />

    <button type="submit" class="btn" ng-disabled="myForm.$invalid">Submit</button>
  </form>
</div>

Here is a screenshot of the real thing:

Click to view screenshot

+4
source share

All Articles