Question

下面是我的代码，用于显示文本框和旁边的按钮，以便使用ng-file-upload上传文件。我试图显示相应的验证错误消息，如必填字段，文件大小限制和可接受的文件类型。我能够成功显示所需字段和文件大小的错误消息，但不能用于可接受的文件类型，这意味着

<div ng-message="accept">File format must be {{ vm.fileaccept }}</div>无效。我在控制器中将vm.fileaccept设置为vm.fileaccept = '.pdf,image/*';

<form name="uploadForm" ng-submit="vm.submitFile()" novalidate>
<div layout="row" flex="100">
<div layout="column" flex="95">
    <md-input-container>
        <input type="text" readonly name="filename"
               class="form-control" ng-model="vm.filename" required/>
        <div class="errors"
             ng-show="uploadForm.$submitted || uploadForm.filename.$dirty"
             ng-messages="uploadForm.filename.$error">
            <div ng-message="required">Required</div>
        </div>
        <div class="errors"
             ng-show="uploadForm.file.$error"
             ng-messages="uploadForm.file.$error">
            <div ng-message="maxSize">File size cannot exceed 1MB</div>
            <div ng-message="accept">File format must be {{ vm.fileaccept }}</div>
        </div>
    </md-input-container>
</div>
<div layout="column" flex="5">
    <md-input-container>
        <button
                ngf-select="vm.selectFile($file, $invalidFiles)" ng-model="file"
                name="file" ngf-accept="vm.fileaccept" ngf-pattern="vm.fileaccept"
                ngf-min-height="100" ngf-max-size="1MB">
            <i class="fa fa-folder-open-o"></i></button>
    </md-input-container>
</div>
</div>
</form>

Answer 1

我不确切地知道原因，下面的改变是有效的。

<div ng-message="accept">File format must be {{ vm.fileaccept }}</div>

到

<div ng-message="pattern">File format must be {{ vm.fileaccept }}</div>

ng-file-upload文件类型/大小验证，包含多个ng-messages

1 个答案: