html - Disable button on csv import in angular js

Question

I have used ng-csv-import to import a css file from desktop and i have submit button which uploads the csv. My requirements to disable the submit button until the user select a css file. Thanks in advance.

  <ng-csv-import name="uploadCsv" content="MyCsv"
               separator="csv.separator"
               result="csv.results"
               accept="csv.accept" required>
</ng-csv-import>
<div class="col-xs-12 col-sm-12">
    <button type="submit" class="btn-top btn-rectangle" ng-click="submit()">Submit</button>
</div>

Answer 1

You could use ng-disabled on the button like so:

 <button type="submit" class="btn-top btn-rectangle" ng-click="submit()" ng-disabled="yourDisabledVariable">Submit</button>

Then watch for the ng-csv-import content in your controller

//Default is disabled
$scope.yourDisabledVariable = true;
// Watch for changes on $scope.MyCsv
$scope.$watch('MyCsv', function(newVal,oldVal){
    // see if user uploaded a csv by looking at $scope.MyCsv 
    if(newVal){
       // Enable the button
       $scope.yourDisabledVariable = false;
    }
})

Answer 2

You can try this.

 $('input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $('input[type="submit"]').prop('disabled', false);
        }
     });