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

【问题标题】：ng-file-upload validation does not run (form always valid)ng-file-upload 验证未运行（表单始终有效）
【发布时间】：2016-04-23 06:02:15
【问题描述】：

我需要为数组中的每个项目上传文件。我使用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 的理解是正确的，那么每次迭代都应该有自己的范围。

我错过了什么？

【问题讨论】：

那么您想要多个表单还是只需要一个包含多个字段的表单？
@SambhavGore 多个表单用于 ng-repeat 的每次迭代。将编辑问题以明确说明。
那么在这种情况下，我认为您需要将表单名称设置为动态。
@SambhavGore 那将如何完成？ name="upload-{{$index}} 似乎没有按预期工作。
这里提到了另一种方法 - stackoverflow.com/questions/27513192/… 使用 ng-init .. 你可以试试吗？

标签： javascript angularjs forms validation ng-file-upload

【解决方案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>

【讨论】：