Input validations on table ng-repeat

Question

I am making app using angularJs app and I have one table in which I am using ng-repeat with texbox in td now I want to validate texbox so I used ng-form and ng-class but I am getting invalid expression error

my code is

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

but not worked then I have tried this

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

that also not worked

so can someone suggest me right way to archive this thanks in advance

Answer 1

• The syntax is wrong, you should use ng-class="{...}" not ng-class=:{...}

• You must quote the input name, i.e ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}" you are actually referring to a (none existing) variable called abc-pqr-xx

• When you refer to $dirty the input must have a ng-model

The correct markup could look like this :

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

Answer 2

it just misses the quotes: ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}"

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

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

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