如何在用戶沒有在AngularJS的輸入字段中輸入任何數據時禁用按鈕？

Question

最初在輸入字段按鈕中輸入數據後按鈕被禁用是否啓用瞭如何在AngularJS中解決這個問題？

  $scope.productKeyId = []; 
 
\t \t \t \t \t \t var productKey  = []; 
 
\t \t \t \t \t \t $scope.user  = {}; 
 
    \t \t \t \t \t \t $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) 
 
       }); 
 
\t \t \t \t \t \t \t //Disable clicked button and other.. 
 
\t \t \t \t \t \t \t //$(event.currentTarget).parents(".resetIt").toggleClass("fadeAndDisable", false); 
 
\t \t \t \t \t \t }

<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>

Answer 1

你可以把你的輸入和你的按鈕在<form/>，然後添加您的輸入required屬性，並檢查您的形式是在您的按鈕ng-disabled有效。

事情是這樣的：

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

或者，如果你不想使用<form/>你仍然可以使用你的按鈕，NG-disabled屬性，並檢查您輸入的模式，像這樣：

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

如果你的輸入爲空，那麼yourModel.length ===0這使得這個陳述變得虛僞並且禁用你的按鈕。