AngularJs ng-file-upload验证未更新

时间:2018-08-17 07:06:53

标签: angularjs validation ng-file-upload

我正在使用ng-file-upload进行多个文件上传。选择有效文件后,将启用保存按钮。如果文件大小无效,则将禁用保存按钮 如果删除了无效文件,则该按钮仍处于禁用状态。 另外,如果我在无效文件后追加,则启用按钮。 简而言之,表单值不会更新。

柱塞https://plnkr.co/edit/pMUkeryivdNJ3x2XIdHB?p=preview

角度:

var app = angular.module('fileUpload', ['ngMessages', 'ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function($scope, Upload, $timeout) {

  $scope.log = '';
  $scope.docfiles = null;
  $scope.user = {
    firstName: undefined
  };
  $scope.remove = function(index) {
    $scope.docfiles.splice(index, 1);
  }

  $scope.saveForm = function() {

    alert('ok')
  }
}]);

HTML:

<form name="newinvoiceform" novalidate autocomplete="off">
    <div>
      <div class="col-sm-6 form-group">
        <label>First Name</label>
        <input type="text" placeholder="Enter First Name Here.." name="firstName" class="form-control" ng-model="user.firstName" required />
        <div class="error" ng-messages="newinvoiceform.firstName.$error" ng-show="newinvoiceform.firstName.$dirty">
          <span ng-message="required">This is a required field</span>
        </div>
      </div>
      <div class="row">

        <div class="col-sm-12 col-md-12">
          <div class="form-group">
            <label>Invoice File:
              <span> Maximum File : 5 , Format: png/jpg/jpeg/pdf, Size less tthan 3 MB </span>
            </label>

            <input type="file" tabindex="6" ngf-select ng-model="docfiles" ngf-keep="'keep'" name="invoiceFile" ngf-max-size="3MB" ngf-pattern="'.png,.jpg,.jpeg,.pdf'" ngf-model-invalid="vm.invalidFiles" ng-model-options="{ allowInvalid: true }" multiple required
            />

            <div>
              <div ng-if="docfiles && docfiles.length">

                <table class="table">
                  <thead>
                    <tr>
                      <th width="50%">Name</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="f in docfiles">
                      <td>
                        <strong>{{f.name}}</strong>
                      </td>

                      <td nowrap>
                        <button type="button" class="btn btn-danger btn-xs" ng-click="remove($index)">
                          <span class="glyphicon glyphicon-trash"></span>
                        </button>
                      </td>
                      <td>
                        <div ng-messages="f.$error">
                          <div ng-show="f.$error=='maxSize'">The file must be less than 3MB</div>
                          <div ng-show="f.$error=='pattern'">Invalid file format. File must be png/jpg/jpeg/pdf format.</div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
    <button class="btn btn-primary" type="button" tabindex=7 ng-disabled="newinvoiceform.$invalid" ng-click="saveForm()">Save</button>

  </form>

0 个答案:

没有答案