ng-file-upload驗證未運行（表單始終有效）

Question

我需要為數組中的每個項目上傳文件。 我正在使用ng-repeat遍歷數組和ng-file-upload插件來處理文件上傳和驗證。 預期結果將是多種形式。 每次ng-repeat

但是出於某種原因，驗證永遠不會失敗，並且總是提交表單。

查看代碼（為清楚起見已簡化）：

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

我懷疑這與ng-repeat的uploadForm范圍有關，但是如果我對ng-repeat理解是正確的，則每次迭代都應具有自己的范圍。

我想念什么？

Answer 1

您可以使用ng-form創建動態表單並對其進行驗證

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