AngularJs Disable Submit Button Until A File Upload Path Selected

I'm new to AngularJS and I can seem to find a solution to my problem. I have a file upload field on my site and a submit button. This page has a drop down list and a disabled sub

Solution 1:

In your submit button, ng-disabled attribute

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="form-group">
  <div class="col-sm-8">
    <select name="selectedbankaccountname" ng-options="choice for choice in bankaccountnames" ng-model="selectedbankaccountname" class="form-control" style="width:100% !important" focus-on="setfocus" required>
      <option></option>
    </select>
  </div>
  <!-- TODO - BUTTON NEEDS TO BE DISABLED IF BANK UPLOAD SELECTED & FILE NOT SELECTED -->
  <button type="submit" class="btn btn-success" ng-disabled="!bankfilepath  || startautoreconciliation.selectedbankaccountname.$invalid || disablebutton" ng-click="startrec()" title="Click to start the auto reconciliation procedure.">Start Auto Rec</button>
</div>
<div class="form-group" ng-if="bankreconciliation.reconciliationtype == 'Bank file upload'">
  <div class="col-sm-12">
    <p>Please ensure that you have copied the selected file to the designated folder prior to uploading the bank file.</p>
    <input type="file" style="width: 100%; height: 35px; border: none !important; cursor: pointer" onchange="angular.element(this).scope().file_changed(this)" ng-model="bankfilepath" />
  </div>
</div>

ng-disabled="!bankfilepath  || startautoreconciliation.selectedbankaccountname.$invalid || disablebutton"

check for bankfilepath as well.

So the button will be enabled only if the file is selected. Initially the bankfilepath will be undefined and once the user has selected a file, it will have the file path.