Joseph Ocasio
Joseph Ocasio

Reputation: 999

AngularJS - ng-disabled true/false not working properly

I am trying to disable or enable a button when the value of a variable changes. ng-disabled is viewing the change of the value but is not disabling the button if it is enabled.

Html:

 <form name="myForm">
      <input ng-pattern="onlyNumbers" ng-model="value" name="number" />
      Valid? {{myForm.number.$valid}}
      <button ng-disabled="{{!myForm.number.$valid}}"> Hello </button>
  </form>

Js:

 $scope.onlyNumbers = /^\d+$/;

Upvotes: 2

Views: 12874

Answers (3)

Donal
Donal

Reputation: 32713

Remove the brackets within ng-disabled:

<button ng-disabled="!myForm.number.$valid"> Hello </button>

Upvotes: 2

borracciaBlu
borracciaBlu

Reputation: 4225

Try this:

<form name="myForm">
    <input ng-pattern="onlyNumbers" ng-model="value" name="number" />
  Valid? {{myForm.number.$valid}}
    <button ng-disabled="myForm.number.$invalid"> Hello </button>
</form>

Upvotes: 1

Zee
Zee

Reputation: 8488

You don't have to use interpolation({{}}) inside ng-disabled:

<button ng-disabled="!myForm.number.$valid"> Hello </button>

Upvotes: 7

Related Questions