CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsangularjs-directive
Ayesha
Ayesha

Reputation: 905

Enable/disable a button based on inputs' validations

I have this jsfiddle. Can someone please help me on this. http://jsfiddle.net/ash12/kk1s3a1d/27/

HTML Code

<div ng-controller="ListController"><br>
    &emsp;File:                 
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    &emsp;&emsp;Name:&emsp;&emsp;&emsp;
    &emsp;&emsp;City:<br/>

    <input type='file' onchange="angular.element(this).scope().fileNameChanged(this)">
    <select name="singleSelect" ng-model="activeItem.content">
          <option  value="" disabled="" selected="" style="display:none;">Select Name</option>
          <option>Rob</option>
          <option>Dilan</option>
    </select>
     <select name="singleSelect1" ng-model="activeItem.content1">
          <option value="" disabled="" selected="" style="display:none;">Select City</option>
          <option>China</option>
          <option>Korea</option>
          <option>United States</option> 
    </select>   
    <button ng-click="addItem()" ng-disabled="disableAdd">+</button><br><br><br><br>
     List:
    <ul>
        <li ng-repeat="item in items">&emsp;&emsp;<a>{{item.name}}</a>&emsp;&emsp;&emsp;&emsp;<a>{{item.content}}</a>
            &emsp;&emsp;&emsp;&emsp;&emsp;<a>{{item.content1}}</a>
        </li>
    </ul>
</div>

JS code.

function ListController($scope) {
$scope.items = [{
    }];

$scope.activeItem = {
    name: '',
    content: '',
    content1:''
}

$scope.fileNameChanged = function(el){
    $scope.activeItem.name = el.files[0].name
}

$scope.addItem = function () {
    $scope.items.push($scope.activeItem);
    if($scope.items.length > 6)
    {
        $scope.disableAdd = true
    }
    $scope.activeItem = {} /* reset active item*/
}
}

I want the Add button to be activated only when user selects all the inputs. i.e. file is selected and dropdown values are selected.

Currently it does not check for validation. it keeps on adding irrespective of any of the three options selected. I want it to add only when all three inputs have been selected. Any help is appreciated.

Upvotes: 1

Views: 159

Answers (1)

Bernardino Frola
Bernardino Frola

Reputation: 328

Two changes required to your code in order to achieve what you want:

  • Wrap $scope.activeItem in $scope.apply() to make the page aware of the changes to the file input.
  • Check the status of the form in the ng-disabled statement.

Further improvements:

  • Initialise items to [] instead of [{}].

Suggested solution

jsfiddle: https://jsfiddle.net/bfrola/1z5eejqx/6/

HTML code (only button element changes):

<button ng-click="addItem()" ng-disabled="isButtonAddDisabled()">+</button>

JS code:

function ListController($scope) {    
    $scope.items = [];
    $scope.activeItem = {
        name: '',
        content: '',
        content1:''
    }
    $scope.fileNameChanged = function(el){
        $scope.$apply(function () {
            $scope.activeItem.name = el.files[0].name;
        });
    }
    $scope.isButtonAddDisabled = function() {  
        // Make sure the selection is complete
        if (!$scope.activeItem.name ||
            !$scope.activeItem.content ||
            !$scope.activeItem.content1) {
            return true;
        }
        // Not to many items
        if ($scope.items.length > 6)
        {
            return true;
        }
        // All ok, not disabled
        return false;
    }
    $scope.addItem = function () {
        // Add here further form validations ...
        $scope.items.push($scope.activeItem);
        $scope.activeItem = {}; /* reset active item*/
    }
}

Upvotes: 1

Related Questions