CODEWITHSUNDEEP
angularjs
Kapil Soni
Kapil Soni

Reputation: 1051

How Do I disable a button if the user is not enter any data in the input field in a AngularJS?

Initially button is disable after enter the data in input field button is enable how to solve this issue in the AngularJS?

            $scope.productKeyId  = [];
						var productKey     = [];
						$scope.user        = {};
 						$scope.createAlbumDialog = function(event, productObj) {
                //Disable clicked button and other..
                //$(event.currentTarget).parents(".resetIt").toggleClass("fadeAndDisable", true);

                $scope.productKeyId  = productObj.keyId;
                $scope.albumName  =  $scope.user.userSearchInProduct;
                 console.log("productKey :: " + $scope.productKey + " albumName :: " + $scope.albumName);

                 var PRODUCT_DB_REF = firebase.database().ref('datastore/productsAlbum');

                 PRODUCT_DB_REF.push({
                    productKey          : [$scope.productKeyId],
                    albumName           : $scope.albumName,
                    sellerUserTypeKeyId : Number(AUTH.userTypeKeyId)
                 });
							//Disable clicked button and other..
							//$(event.currentTarget).parents(".resetIt").toggleClass("fadeAndDisable", false);
						}
<div class="w3-center">
          <button type="button" rel="tooltip" class="btn btn-rose btn-xs" 
            ng-click="createAlbumDialog($event, productObj)">
            <i class="material-icons">add</i>Create Album
          </button>
      </div>

Upvotes: 0

Views: 53

Answers (1)

Freego
Freego

Reputation: 466

You could put your input and your button in a <form/> and then add the required attribute on your input, and check if your form is valid in a ng-disabled on your button.

Something like this : 

<form name=myForm>
   <input ng-model="yourModel" required/>
   <button ng-click="yourClickFunction()" ng-disabled="myForm.$invalid">My Button</button>
</form>

Or if you don't want to use a <form/>you could still use the ng-disabled attribute on your button and check on your input's model like so :

<input ng-model="yourModel" required/>
<button ng-click="yourClickFunction()" ng-disabled="!yourModel.length">My Button</button>

If your input is empty then yourModel.length ===0which makes this statement falsy and disabling your button.

Upvotes: 1

Related Questions