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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script><divclass="form-group"><divclass="col-sm-8"><selectname="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 --><buttontype="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><divclass="form-group"ng-if="bankreconciliation.reconciliationtype == 'Bank file upload'"><divclass="col-sm-12"><p>Please ensure that you have copied the selected file to the designated folder prior to uploading the bank file.</p><inputtype="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.