murday1983 murday1983 - 5 months ago 56
HTML Question

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 submit button when the user first hits the page. The submit button is only enable once a selection is made from the drop down list. This works great but I have now been asked to add a file upload option to the list which I have done and my file upload

<input type="file">
field is displayed when selected.

The issue I have is that when the user selects the upload option it's enabling my button and I only want the submit button to be enabled once the file path has been selected.

At the moment the enabling/disabling of the button is done in my view as shown below.

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


Can anyone shed any light on how I can get this working.

Answer

In your submit button, ng-disabled attribute

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.

Comments