AngularJs禁用提交按钮，直到选择文件上传路径

Question

我是 AngularJS 的新手，我似乎可以找到解决问题的方法。我的网站上有一个文件上传字段和一个提交按钮。当用户第一次点击该页面时，该页面有一个下拉列表和一个禁用的提交按钮。提交按钮仅在从下拉列表中进行选择后启用。这很好用，但现在我被要求在我已经完成的列表中添加一个文件上传选项，并且我的文件上传 <input type="file"> 字段在选择时显示。

我遇到的问题是，当用户选择上传选项时，它启用了我的按钮，我只希望在选择文件路径后启用提交按钮。

目前按钮的启用/禁用在我的视图中完成，如下所示。

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

任何人都可以解释我如何使它工作。

Answer 1

在您的提交按钮中，ng-disabled 属性

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

同时检查bankfilepath。

因此，只有在选择文件时才会启用该按钮。最初bankfilepath 将是未定义的，一旦用户选择了一个文件，它将具有文件路径。