Отображение сообщений об ошибках проверки в угловых js

Question

У меня есть таблица, в которой строки реплицируются с использованием ng-repeat.В каждой строке есть текст для значения и a, который показывает сообщение об ошибке.Так что они также будут воспроизведены.Сообщение об ошибке будет отображаться при проверке ввода.

<tr ng-repeat="validationRule in form.validationRules">
  <td>
    <input type="text" name="delimiter" 
           ng-pattern="/^(?:([^A-Za-z0-9_\s])(?!.*?\1))+$/" 
           maxlength="1" title="Enter the delimiter!" 
           ng-model="validationRule.delimiter" 
           style="width: 20px;" required />
    <span ng-show="appForm.delimiter.$dirty && appForm.delimiter.$invalid"> 
       <span style="color: red" 
             ng-show="appForm.delimiter.$error.required"
	     class="help-block">Field is required!
       </span>
       <span style="color: red" 
             ng-show="appForm.delimiter.$error.pattern" 
             class="help-block">Enter valid delimiter!
       </span>
    </span>
  </td>
</tr>

Теперь, скажем, на момент времени у меня 5 строк.При сбое проверки по разделителю сообщение об ошибке отображается во всех 5 строках, а не в текущей строке, в которой проверка не пройдена.

Подход, который я пробовал, заключался в следующем:

1. добавить функцию в js, которая попытается выяснить текущую строку.

$scope.isCurrentRow = function(index) {
  var currentRow = $scope.form.validationRules.index(this);
  alert("currentRow: " + currentRow);
  if (index == currentRow) {
    return true;
  }
  return false;
};

добавить вызов функции в состоянии ng-show

<span style="color: red" 
      ng-show="appForm.delimiter.$error.pattern && isCurrentRow($index)"
      class="help-block">Enter valid delimiter!
</span>

Этот подход не работает вообще.Есть ли лучший угловой подход, который я мог бы попробовать?

Answer 1

Измените свой код на это.Должно работать

<tr ng-repeat="validationRule in form.validationRules">
  <td>
    <input type="text" name="delimiter[$index]" 
           ng-pattern="/^(?:([^A-Za-z0-9_\s])(?!.*?\1))+$/" 
           maxlength="1" title="Enter the delimiter!" 
           ng-model="validationRule.delimiter" 
           style="width: 20px;" required />
    <span ng-show="appForm.delimiter[$index].$dirty && appForm.delimiter[$index].$invalid"> 
       <span style="color: red" 
             ng-show="appForm.delimiter.$error.required"
         class="help-block">Field is required!
       </span>
       <span style="color: red" 
             ng-show="appForm.delimiter[$index].$error.pattern" 
             class="help-block">Enter valid delimiter!
       </span>
    </span>
  </td>
</tr>