AngularJS文件上传表单提交按钮无法重新启用问题求助

问题根源 #

AngularJS原生的ng-model并不支持<input type="file">元素，这意味着你添加的required属性无法触发表单验证状态更新——不管用户是否选择文件，表单始终处于$invalid状态，导致提交按钮一直被禁用。

解决方案 #

下面提供两种可行的解决方式，任选其一即可：

方案一：自定义指令实现文件输入的模型绑定与验证

通过自定义指令处理文件输入的change事件，同步模型数据并触发表单验证：

HTML代码修改：

<form name="uploadForm">
  <div class="row">
    <div class="col-12">
      <div class="form-group">
        <label class="control-label col-form-label">Select File <span style="color: red">*</span></label>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">Upload</span>
          </div>
          <div class="custom-file">
            <!-- 替换原生ng-model为自定义指令file-model -->
            <input type="file" name="fileinput" class="custom-file-input" id="inputGroupFile01" file-model="file" required>
            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="form-group">
        <label class="control-label col-form-label">Click on Upload to upload the file</label>
        <button class="btn btn-primary" ng-click="upload()" ng-disabled="uploadForm.$invalid">Upload</button>
      </div>
    </div>
  </div>
</form>

自定义指令代码：

angular.module('你的应用模块名').directive('fileModel', ['$parse', function ($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var model = $parse(attrs.fileModel);
      var modelSetter = model.assign;
      
      element.bind('change', function(){
        scope.$apply(function(){
          // 将选中文件赋值给scope变量
          modelSetter(scope, element[0].files[0]);
          // 手动更新控件验证状态
          element[0].setCustomValidity(element[0].files.length === 0 ? '请选择文件' : '');
          // 标记控件为已修改，触发表单验证更新
          scope.uploadForm.fileinput.$setDirty();
        });
      });
    }
  };
}]);

方案二：手动监听文件输入的change事件更新验证状态

如果不想自定义指令，可直接监听change事件手动更新表单控件的验证状态：

HTML代码修改：

<form name="uploadForm">
  <div class="row">
    <div class="col-12">
      <div class="form-group">
        <label class="control-label col-form-label">Select File <span style="color: red">*</span></label>
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text">Upload</span>
          </div>
          <div class="custom-file">
            <input type="file" name="fileinput" class="custom-file-input" id="inputGroupFile01" ng-change="onFileSelect()" required>
            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="form-group">
        <label class="control-label col-form-label">Click on Upload to upload the file</label>
        <button class="btn btn-primary" ng-click="upload()" ng-disabled="uploadForm.$invalid">Upload</button>
      </div>
    </div>
  </div>
</form>

控制器代码：

angular.module('你的应用模块名').controller('你的控制器名', ['$scope', function($scope) {
  $scope.onFileSelect = function() {
    var fileInput = document.getElementById('inputGroupFile01');
    // 根据是否选中文件设置验证信息
    fileInput.setCustomValidity(fileInput.files.length === 0 ? '请选择文件' : '');
    // 标记控件为已修改，触发表单验证状态更新
    $scope.uploadForm.fileinput.$setDirty();
    // 可选：保存选中文件到scope，供上传逻辑使用
    $scope.file = fileInput.files[0];
  };
  
  $scope.upload = function() {
    // 编写文件上传逻辑
    console.log('开始上传文件:', $scope.file);
  };
}]);

效果说明 #

两种方案都能实现：用户未选择文件时，提交按钮保持禁用；选择文件后，表单验证状态更新为有效，按钮自动启用。

内容的提问来源于stack exchange，提问作者Rikk Mor