AngularJs Disable Submit Button Until A File Upload Path Selected

Question

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.

vrintle · Accepted Answer · 2019-06-03 17:54:30Z

2

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.

edited Jun 3, 2019 at 17:54

vrintle

5,6263 gold badges19 silver badges47 bronze badges

answered Apr 1, 2015 at 8:20

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

murday1983 Over a year ago

Thanks this works great for my new upload option but now has made the button disabled for all my other options which don't require an upload path. Is there a way of doing this or would I need to create/create 2 submit button and show the relevant one depending on the selection from the drop down list

murday1983 Over a year ago

Managed to sort it doing: ng-disabled="bankreconciliation.reconciliationtype == 'Bank file upload' && !bankfilepath || startautoreconciliation.selectedbankaccountname.$invalid || disablebutton"

Collectives™ on Stack Overflow

AngularJs Disable Submit Button Until A File Upload Path Selected

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related