我正在使用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>