ng-file-upload validation does not run (form always valid)

Question

I need a file-upload for every item in an array. I'm using ng-repeat to iterate through the array and the ng-file-upload plugin to handle the file upload and validation. The expected result would be multiple forms. One for each iteration of ng-repeat

But for some reason the validation never fails and the form is always submitted.

View code (simplified for clarity):

<div ng-repeat="point in endpoints">
<div class="panel-body" >
    <form name="uploadForm">
        <div class="media-uploader button drop-box"
            ng-model="file"
            name="file"
            ngf-drag-over-class="'dragover'"
            ngf-accept="{{point.endpoint.type.acceptedFormat.join('/*,') }}/*"
            ngf-select="uploadForm.$valid && submitUpload($file, point)"
            ngf-drop="submitUpload($file, point)"
            ngf-max-size="{{ maxFileUploadSize }}"
            ngf-pattern="{{ point.endpoint.type.acceptedFormat.join('/*,') }}/*"
            ngf-max-duration="{{ (point.timeslots * 15)+tolerance }}"
            ngf-validate = "{width: {min: {{ point.endpoint.format.width }}, max:{{ point.endpoint.format.width }}},
                            height: {min: {{ point.endpoint.format.height }}, max: {{ point.endpoint.format.height }}}
                            }">

            <p>Click or drag to select images and video</p>
        </div>
     </form>
     <div class="has-error" >
         <div ng-show="uploadForm.file.$error.maxHeight || uploadForm.file.$error.maxWidth ">
             Media must be {{ point.endpoint.format.width }} &times; {{ point.endpoint.format.height }}px
         </div>
         <div ng-show="uploadForm.file.$error.maxSize">
             Max upload size exceeded the maximum allowed size is 200MB
         </div>
         <div ng-show="uploadForm.file.$error.pattern ">
             This endpoint only allows {{ point.endpoint.type.acceptedFormat.join(', ') }} uploads
         </div>
         <div ng-show="uploadForm.file.$error.maxDuration ">
             Your video exceeds the maximum allowed time of {{ point.timeslots * 15 }} seconds.
         </div>
     </div>
 </div>

I suspect this has something to do with the scope of uploadForm within the ng-repeat, but if my understanding of ng-repeat is correct each iteration should have it's own scope.

What am I missing?

So you want multiple forms or just one form with multiple fields ? — Sambhav Gore, Jan 18 '16 at 06:28
@SambhavGore Multiple forms one for each iteration of the ng-repeat. Will edit the question to make that clear. — AFK, Jan 18 '16 at 06:34
Well in that case I think you need to set your form name as dynamic. — Sambhav Gore, Jan 18 '16 at 06:37
@SambhavGore how would that be done? name="upload-{{$index}} does not seem to work as expected. — AFK, Jan 18 '16 at 06:50
There is another way mentioned here - http://stackoverflow.com/questions/27513192/angularjs-dynamic-name-for-a-form-inside-ng-repeat using ng-init .. can you try that ? — Sambhav Gore, Jan 18 '16 at 06:56

score 0 · Answer 1 · answered Jan 18 '16 at 08:48

You can use ng-form to create dynamic forms and validate it

    <form name="outerForm">
       <div ng-repeat="item in items">
       <ng-form name="innerForm">
          <input type="text" name="foo" ng-model="item.foo" />
          <span ng-show="innerForm.foo.$error.required">required</span>
       </ng-form>
       </div>
       <input type="submit" ng-disabled="outerForm.$invalid" />
    </form>

ng-file-upload validation does not run (form always valid)

1 Answers1