Question

我有一个表格，其中行使用ng-repeat进行复制。每行都有一个值的文本，并显示错误消息。所以这些也将被复制。验证输入时将显示错误消息。

＆＃13;

<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>

＆＃13;

现在，让我们说，在某个时间点，我有5行。对分隔符的验证失败时，错误消息将显示在所有5行而不是验证失败的当前行上。

我尝试的方法是：

在js中添加一个函数，它将尝试找出当前行。

＆＃13;

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

＆＃13;

在ng-show条件

＆＃13;

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

＆＃13;

这种方法根本不起作用。我可以尝试以角度方式采用更好的方法吗？

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>

以角度js显示验证错误消息

1 个答案: