angularjs form-button not validated or enabled

Question

I have an angularjs form that pulls default data from scope. With the default data the form is expected to be validated and hence enable the button for submission but the reverse is the case except data is entered on the input field and this enables the button. here is the snippet

<div ng-controller="FormValidationController as frmValidationController" class="ui basic segment">

  <form class="ui form" name="frmValidation" novalidate>    
      <div ng-class = "{'has-error':frmValidation.option1.$invalid && !frmValidation.option1.$pristine}"
           class="required field">
          <label>Selection</label>
          <input ng-model="option" ng-minlength="3" formcontrol
                 name="option1" placeholder="Option" type="text"
                 class="ng-dirty ng-valid ng-touched" required>
           <div _ngcontent-c5="" ngxerrors="option1">
               <div class="input-error-message" ngxerror="validName" hidden="">
                    selection should be there
                </div>               
          </div>
          <p ng-show = "frmValidation.option1.$invalid && !frmValidation.option1.$pristine"
             class = "input-error-message">required</p>
      </div>

if the model has data, the button should be enabled on launch but this never happens and I want it to happen

<button ng-click="submit(); frmValidationController.submitForm(frmValidation.$valid)"
    ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"
    class="ui primary button" tabindex="0" type="submit">
  Proceed
</button>

Divide and conquer. When you have a small amount of code, but the source of the problem is entirely unclear, start removing code a bit at a time until the problem disappears. — georgeawg
– georgeawg, Commented Jun 12, 2018 at 23:13
Setting class="ng-dirty" won't set the $dirty state to true. The ngModelController ignores class settings. — georgeawg
– georgeawg, Commented Jun 12, 2018 at 23:52
Setting class="ng-valid" won't set the $valid state to true. The ngModelController ignores class settings. — georgeawg
– georgeawg, Commented Jun 12, 2018 at 23:53

jlogan · Accepted Answer · 2018-06-12 23:56:45Z

1

The problem is here:

ng-disabled ="!frmValidation.$dirty || frmValidation.$invalid"

Specifically:

!frmValidation.$dirty

The form is only dirty if an actually user has interacted with it. Because you're loading default data, the form is filled in correctly but the user has NOT touched or "dirtied" it.

Remove that check and it should work as expected I believe.

answered Jun 12, 2018 at 23:56

jlogan

9476 silver badges9 bronze badges

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

2 Comments

rocket Over a year ago

so I should use just this >> !frmValidation.$dirty in the form

jlogan Over a year ago

It looks like you don't need to use !frmValidation.$dirty at all. You should only be binding frmValidation.$invalid to ng=disabled.

Collectives™ on Stack Overflow

angularjs form-button not validated or enabled

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related