6

I am new to AngularJS, and I am trying to create a simple form. I have the Submit button to be disabled if the form is not valid (all fields not filled in). It is working fine, except on Chrome, when the auto-fill is enabled. The fields are pre-filled, but the submit button is still disabled, until I click somewhere (anywhere i.e. input fields, empty space, etc.) on the page.

Not sure how I can provide a working example replicating Chrome's scenario, but here is a JSFiddle (and code below) of the 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 the screenshot of the real thing:

Click to see screenshot

Elie Faës
  • 3,215
  • 1
  • 25
  • 41
Dev
  • 149
  • 1
  • 1
  • 11
  • You can take a look at this: http://stackoverflow.com/questions/21168367/angularjs-chrome-autocomplete-dilemma – gnerkus Mar 07 '16 at 19:08
  • OR: http://stackoverflow.com/questions/14965968/angularjs-browser-autofill-workaround-by-using-a-directive – KreepN Mar 07 '16 at 19:11

0 Answers0