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

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

同时检查bankfilepath。

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

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

1 个答案: