Как я могу добавить валидацию ng-maxlength в ng-repeat с сообщением об ошибке?

Question

У меня есть простой код:

    <div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">

                        <div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
                            <input class="form-control" name="aDiagnosisName" ng-model="aDiagnosis.Name" ng-disabled="true">
                        </div>
                        <div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
                            <input class="form-control" name="aDiagnosisResult" ng-maxlength="200" ng-model="aDiagnosis.Result" />
                            <p class="help-block" ng-if="form.aDiagnosisResult.$error.maxlength">Too Large</p>
                        </div>
</div>

и используйте $scope.form.$valid для генерации сообщения об ошибке. Но проблема в том, что используйте ng-repeat каждый раз, когда он находит одно и то же имя, и когда я хочу создать второй список, нажав кнопку, первое сообщение об ошибке исчезло, а сообщение об ошибке теперь работает со вторым текстом (очевидно). Итак, как я могу генерировать сообщения об ошибках каждый раз динамически, поэтому каждая текстовая форма в ng-repeat имеет свое собственное сообщение об ошибке.

Answer 1

Вы можете генерировать динамически name атрибут ваших входов в ng-repeat, Например, вы можете поставить $index (или идентификатор ваших объектов или что вы хотите), чтобы генерировать уникальные name для ваших входов.

<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription">

     <div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}>
          <input class="form-control" name="aDiagnosisName-{{$index}}" ng-model="aDiagnosis.Name" ng-disabled="true">
     </div>
     <div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}>
          <input class="form-control" name="aDiagnosisResult-{{$index}}" ng-maxlength="200" ng-model="aDiagnosis.Result" />
          <p class="help-block" ng-if="form['aDiagnosisResult-' + $index].$error.maxlength">Too Large</p>
     </div>
</div>

Пример на плункер.