Question

一些ng-file-upload指令显然在这里工作：我可以看到图像预览，并且上传效果很好。我现在正在尝试验证图像分辨率。检查元素时我会看到以下内容：

<input type="file" ngf-dimensions="$width == 114 && $height == 114" ng-select="onFileSelect($files)" accept="image/png" base-sixty-four-input="" ng-model="fileDesc.file" name="filename_png" id="filename_png" class="ng-untouched ng-valid ng-isolate-scope ng-valid-parse ng-dirty">

我可以看到ngf-dimensions属性已正确填充，此外，ng-dirty正在设置，因为我此时已尝试上传文件。但文件的尺寸不是114x114。我不应该看到ng-invalid而不是ng-valid吗？

我也尝试过这种更长的措辞，我相信它是等效的，效果相同：

<input type="file" ngf-min-width="114" ngf-min-width="114" ngf-min-height="114" ngf-max-height="114" ... >

是否需要执行某些特定操作才能启用表单字段的验证以及检查form.field.$error的能力？

更新以添加ng-file-upload版本：11.2.0

再次编辑以添加Test: {{form.field}}的输出，是否应填充$validators？或者也许我在这里使用base64 upload指令时会遇到一些冲突？

Test: {"$viewValue":{"filetype":"image/png","filename":"PNG successful.png","filesize":383443,"base64":"..."},"$validators":{},"$asyncValidators":{},"$parsers":[null,null,null,null],"$formatters":[],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":false,"$dirty":true,"$valid":true,"$invalid":false,"$error":{},"$name":"filename_png","$options":null}

Answer 1

我不熟悉这个库，但看起来它的参考文档说：

 ngf-dimensions="$width > 1000 || $height > 1000" or "validateDimension($file, $width, $height)"
 // validate the image dimensions, validate error name: dimensions

如果我查看下面作者的验证示例，他似乎正在使用required属性，这可能是您唯一的问题，但我也会检查form.file.$error.dimensions以查看错误是否正在抓住了：

<input type="file" ngf-select ng-model="picFile" name="file" accept="image/*" ngf-max-size="2MB" required ngf-model-invalid="errorFiles">

Answer 2

我应该首先提供一个jsfiddle。只是试图生成一个来重现我的问题，它迫使我意识到我的代码丢失了模块上的ngFileUpload注入。难怪它不起作用。谢谢@danial，感谢您的出色工作。

ng-file-upload验证（ngf- [max | min] - [height | width]或ngf-dimensions）似乎没有生效

2 个答案: