ng-file-upload validation (ngf-[max|min]-[height|width] or ngf-dimensions) not appearing to take effect

Question

Some of the ng-file-upload directives are clearly working here: I can see the image preview, and upload works well. I am now attempting to validate the image resolution. I see the following below when inspecting the element:

<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">

I can see that the ngf-dimensions attribute is getting populated correctly, and additionally, ng-dirty is getting set because I've attempted to upload a file at this point. But the file's dimensions are not 114x114. Shouldn't I be seeing ng-invalid instead of ng-valid ?

I've also tried this longer phrasing, which I believe to be equivalent, with the same effect:

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

Is there something specific that needs to be done in order to enable the validation of form fields and the ability to check form.field.$error ?

Updated to add ng-file-upload version: 11.2.0

Edited again to add the output of Test: {{form.field}} , should $validators be populated? Or perhaps I'm having some conflict by using the base64 upload directive as well here?

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

I'm not familiar with the library, but it looks like its reference docs say:

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

If I look at the author's validation example below, he appears to be using the required attribute, which may be your only issue, but I would also check form.file.$error.dimensions to see if the error is being caught at all:

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

Answer 2

I should have provided a jsfiddle in the first place. Was just trying to generate one to reproduce my issue, and it forced me to realize that my code had lost the ngFileUpload injection on the module. No wonder it wasn't working. Thanks, @danial, for the nice work.