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

【问题标题】：ng-file-upload validation (ngf-[max|min]-[height|width] or ngf-dimensions) not appearing to take effectng-file-upload 验证（ngf-[max|min]-[height|width] 或 ngf-dimensions）似乎没有生效
【发布时间】：2016-01-20 21:52:33
【问题描述】：

一些 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 上传指令可能会遇到一些冲突？

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}

【问题讨论】：

'ng-file-select' 适用于旧版本的插件。使用“ngf-select”，按照示例进行操作。
谢谢，@danial，我没有看到这种变化。但是我已经进行了更正，验证仍然没有生效。我也尝试添加ngf-max-size="100KB"，但即使我尝试上传分辨率错误且大于最大大小的文件，该元素仍设置为ng-valid。
然后创建一个 jsfiddle，你可能遗漏了一些非常简单的东西。
您可以使用文档中的 jsfiddle 示例进行参考和比较。

标签： javascript angularjs ng-file-upload

【解决方案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">

【讨论】：

我不认为 required 属性是...必需的。我应该能够验证图像是必需的还是可选的。 $error 数组在此调试显示中保持为空：Test: {{ctrl.betaForm[fileDesc.key].$error}}，但是当仅显示 Test: {{ctrl.betaForm[fileDesc.key]}} 时，我确实看到了文件上传字段的预期属性，并且只是一个用于 $error 的空数组。
我列出的示例中的另一个区别是 ngf-select 与 ng-file-select
是的，@danial（该指令的作者）也用该注释对问题发表了评论，但我刚刚更新为使用该注释并且仍然看到相同的行为，没有出现验证发生。
那么对不起。我真的没有答案，但是有太多的文字可以发表评论。 :-D

【解决方案2】：

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

【讨论】：