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>

我怀疑这与uploadForm中ng-repeat的范围有关，但如果我对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>

ng-file-upload验证未运行（表单始终有效）

1 个答案: