时间戳

首页 > 解决方案 > 在 Angular js 中显示验证错误消息

angularjs - 在 Angular js 中显示验证错误消息

问题描述

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

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

  1. 在 ng-show 条件下添加函数调用

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

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

标签： angularjs

解决方案

将您的代码更改为此。它应该工作

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

推荐阅读