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>