Angular form validation not working with components

Question

I have the following form that is the template tied to a angular component. I'm able to retrieve the values tied to $ctrl.form when I submit which shows that the form is being tied to the controller, as expected, however, the $valid on the submit button does not work. Once I add the validator, the button always remains disabled as the form is not valid.

<div class="verification step-3">
  <form name="form" ng-submit="$ctrl.submit()">
    <fieldset ng-disabled="$ctrl.isSubmitting">
      <md-content class="md-no-momentum">

        <!-- username -->
        <md-input-container class="md-icon-float md-block">
          <label>Username</label>
          <input data-id="login-username"
                 ng-model="$ctrl.form.username"
                 name="username"
                 type="text"
                 required>
        </md-input-container>

        <!-- register button -->
        <div class="text-center">
          <md-button data-id="register"
                     class="md-primary md-raised"
                     ng-disabled="!$ctrl.form.$valid"
                     ng-class="{ 'btn-disabled': !$ctrl.form.$valid }"
                     type="submit"
                     ng-click="$ctrl.submit()">
            Create account
          </md-button>
        </div>

      </md-content>
    </fieldset>
  </form>
</div>

Sachila Ranawaka · Accepted Answer · 2017-04-06 16:35:34Z

1

remove the $ctrl from the $valid. $valid use to check the form validation so you don't need to use the controller as reference

change this

ng-disabled="!$ctrl.form.$valid"

to this

ng-disabled="!form.$valid"

remove the ngClick also since you are using ngSubmit

 <md-button data-id="register"
   class="md-primary md-raised"
   ng-disabled="form.$valid"
   ng-class="{ 'btn-disabled': form.$valid }"
   type="submit"> Create account
 </md-button>

answered Apr 6, 2017 at 16:35

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Detuned Over a year ago

Perfect! It made so much more sense to have $ctrl but whatever... :)

Collectives™ on Stack Overflow

Angular form validation not working with components

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related