CODEWITHSUNDEEP
javascriptangularjs
user5115790
user5115790

Reputation:

disable a button if a text input is not an integer with ng-disabled

I have 2 text fields. 

input type="text" placeholder="name" ng-model="name">
input type="text" placeholder="number" ng-model="number">

I validate that the button is not active if no data in text fields. I do not know how to make the button is disabled if there is no positive integer in the text field "number".

<button ng-disabled="!name || !number" value="buttonTest"></button>

I need to be a strictly input type = 'text'

Upvotes: 1

Views: 2397

Answers (2)

Harbinger
Harbinger

Reputation: 604

HTML:

<body ng-app="app">
  <div ng-controller="myController">
    <input type="text" placeholder="name" ng-model="name">
    <br/>
    <input type="text" placeholder="1234" ng-model="number">
    <br/>
    <button ng-model="button" ng-disabled="!name || !parseInt(number) || number < 0">Button</button>
  </div>
</body>

Script:

var app = angular.module('app', []);

app.controller('myController', ['$scope', function($scope) {
  $scope.parseInt = parseInt;
}]);

http://plnkr.co/edit/WBVMKWYSNBAxmQdg7i2K?p=preview

Upvotes: 1

HankScorpio
HankScorpio

Reputation: 3651

Write a function in your controller to check these values and return the result. I sometimes use the length property of strings to determine if there's a value. It covers null, undefined, and empty strings.

$scope.isPositiveInteger = function(value) {
    var floatValue = parseFloat(value);
    var isInteger = floatValue % 1 === 0;
    return isInteger && floatValue > 0;
}

HTML:

<button ng-disabled="name.length < 1 || !isPositiveInteger(number)" value="buttonTest"></button>

Upvotes: 0

Related Questions