Invalid file types are correctly not added to the model but turn the form invalid

So I have this snippet which actually works fine adding multiple files on multiple drags/selects, until I add an invalid file type. The invalid file type is not added to the model but will make the form invalid. The form becomes valid again when I add/append another valid file to the list. I tried put allowInvalid false, ngf-valid-only but none of them solve my problem. Always get the form.files.$error = {“pattern”:true} when adding an invalid file. How can I make these unsupported file types not turn the form invalid?

<div name="files" ngf-drop ngf-select ng-model="ui.files" class="drop-box"  
   ng-model-options="{allowInvalid: false}"
   ngf-drag-over-class="{accept:'dragover', reject: 'reject-dragover'}" 
   ngf-multiple="true" ngf-allow-dir="true"
   accept="{{ui.validFileTypes}}" ngf-keep="true" ngf-valid-only="true"
   ngf-change="filesChanged()"
   ngf-pattern="ui.validFileTypes" required>
</div>

[jonathan-chin]

I was still having trouble with ngf-ignore-invalid. invalid files weren’t being added but the form was still being set as invalid. I checked the source and found a logic typo.

#1685 should fix it

now, if there were a way to ignore invalid files (not validate them) but still give a message? I’ve tried other fixes in the forums but my form has other fields in it that I want to check.

[dimoreno]

@danialfarid How can I show my images thumbnail. for example I have this https://es.stackoverflow.com/questions/90609/error-al-mostrar-preview-de-imagen-en-angularjs `

<div class="row"> <div class="col s12 m12 hide-on-med-and-down"> <div class="image-upload"> <label for="file-input"> photo_camera Agrega imagen 1... </label> </div> </div> <div class="col s12 m12 hide-on-med-and-down"> <div class="image-upload"> <label for="file-input"> photo_camera Agrega imagen 2... </label> </div> </div> </div>

` I want to show thumbnail of 2 images but always show in ng-model number 1 How can I fix that?