ng-file-upload: ngf-model-invalid not compatible with ng-messages

Hi, first of all, I’m very impressed with how far this plugin has come and how much is possible to do with it out of the box. It’s matured a lot over the past year.

I have an issue I hope you can help with. I would like to use ng-messages to show validation errors coming out of ng-file-upload. However, the only way to do that currently seems to be by using a form and file input field.

My UI doesn’t have that, instead I am using the file drop functionality in combination with a button to select files. So when browsing the documentation, I found the directive ngf-model-invalid, thinking it could be used for displaying errors with ng-messages.

The format of the error model however is incompatible with ng-messages or with the form.field.$error output; it expects something along the lines of:

invalidFiles[0].$error = {
  pattern: true,
  required: true
}

but instead it gets:

invalidFiles[0].$error = 'pattern'

Could you make the latter compatible by setting the $error field to be an object hash with the relevant errors in there?

Thanks.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17 (13 by maintainers)

Most upvoted comments

@michelem09 should be able to do the following now, please correct me if I’m wrong @danialfarid :

$scope.invalidFile = {};

<div ngf-drop="selectedFile($file)" ngf-model-invalid="invalidFile"></div>
<div ng-messages="invalidFile.$errorMessages">
  <div ng-message="maxSize">The file must be less than 2MB</div>
  <div ng-message="minHeight">The file must be at least 100px high</div>
</div>

This is when multiple files is not enabled. Otherwise, the invalidFile should be an array of files with errors, e.g.:

$scope.invalidFiles = [];

<div ngf-drop="selectedFile($file)" ngf-model-invalid="invalidFiles"></div>
<div ng-repeat="invalidFile in invalidFiles" ng-messages="invalidFile.$errorMessages">
  <div ng-message="maxSize">The file must be less than 2MB</div>
  <div ng-message="minHeight">The file must be at least 100px high</div>
</div>

adamreisnz on Feb 24, 2016