表ng-repeat上的输入验证

Question

我正在使用angularJs应用程序制作应用程序，我有一个表格，我在td中使用ng-repeat和texbox现在我想验证texbox所以我使用了ng-form 和ng-class但我得到无效的表达错误

我的代码是

<input name ="abc-pqr-{{item.id}}" 
    ng-model="something"
   ng-class="{'has-error':formName.abc-pqr-{{item.id}}.$dirty}">

但没有奏效，那么我试过这个

<input name ="abc-pqr-{{item.id}}" 
   ng-model="something"
   ng-class="{'has-error':formName[abc-pqr-{{item.id}}].$dirty}">

这也没效果

所以有人可以建议我将这个归档的正确方法 提前谢谢

Answer 1

• 语法错误，您应该使用ng-class="{...}"而不是ng-class=:{...}

• 您必须引用输入名称，即ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}"您实际上是指一个名为abc-pqr-xx

的（现有的）变量

• 当您引用$dirty时，输入必须为ng-model

正确的标记可能如下所示：

<input name="abc-pqr-{{item.id}}"
   ng-model="item.value"  
   ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}">

Answer 2

它只是错过了引号：ng-class =＆＃34; {＆＃39; has-error＆＃39;：formName [＆＃39; abc-pqr - {{item.id}}＆ ＃39; ] $脏}＆＃34;

＆＃13;

＆＃13;

angular.module('myApp', [])
.controller('myCtrl', function() {
  this.items = [{id:1}, {id:2}, {id:3}];
});

＆＃13;

.has-error {
  border-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl as vm">    
    <form name="formName">
      <input ng-repeat="item in vm.items"
        name="abc-pqr-{{item.id}}" 
        ng-model="tem.value"
        ng-class="{ 'has-error': formName['abc-pqr-{{item.id}}'].$dirty}"/>
    </form>
  </div>

＆＃13;

＆＃13;

＆＃13;