How to disable the button only if have an input field error

Question

<td>
  <div>
    <ng-form name="mrpForm">
        <input type="number" min="1" name="mrp" step="any" ng-model="sku.mrp" style="width:80px;" / required>
        <span style="color:red;" ng-if="(mrpForm.mrp.$error.min)">Must be greater than zero</span>
    </ng-form>
  </div>
</td>
<td>
  <ng-form name="packQtyform">
    <input type="number" name="skupackQty" min="2" max="100" ng-model="sku.packQty" style="width:100px;" />
    <span style="color:red;" ng-if="(packQtyform.skupackQty.$error.min)">Must be greater than 1</span>
    <span style="color:red;" ng-if="(packQtyform.skupackQty.$error.max)">Maximum 100</span>
  </ng-form>
</td>
<td>
  <button class="col-md-12 col-sm-12 col-xs-12 btn btn-sm blue" ng-disable="!sku.mrp"
ng-click="addsku(sku);>Save</button>
</td>

In the above code, I want to make save button disable only if a sku.packQty value is an error and if sku.mrp empty,sku.packQty can be empty but it should not be an error If error message save button must be disabled.

In button you have an ng-click that you don't close the quotes on. — Sam
– Sam, Commented Dec 16, 2015 at 11:22
Possible duplicate of angular validation - prevent button ng-click() when form is invalid — Paulo Scardine
– Paulo Scardine, Commented Dec 16, 2015 at 11:38

Jithin · Accepted Answer · 2015-12-16 11:28:15Z

0

You can use form-name.$invalid for this.

<button class="col-md-12 col-sm-12 col-xs-12 btn btn-sm blue" ng-disable="!sku.mrp || mrpForm.$invalid || packQtyform.$invalid"
ng-click="addsku(sku);>Save</button>

I couldn't understand the validation conditions but $invalid would do.

answered Dec 16, 2015 at 11:28

Jithin

2,6041 gold badge24 silver badges42 bronze badges

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

1 Comment

Jithin Over a year ago

If you like the answer, please give upvotes too for answers.

Amit · Accepted Answer · 2015-12-16 11:20:11Z

0

I would create a function like:

$scope.valid_form() {
  //here are all the terms, return false if something is wrong
  return true;
}

And then, in my html button I will simply say:

ng-disabled="!valid_form()"

answered Dec 16, 2015 at 11:20

Amit

6,3647 gold badges54 silver badges110 bronze badges

Collectives™ on Stack Overflow

How to disable the button only if have an input field error

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related