Проверка 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> 

Я подозреваю, что это имеет какое-то отношение объема 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>