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

davidkonrad · Accepted Answer · 2018-02-17 20:14:50Z

2

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

answered Feb 17, 2018 at 20:14

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kalpesh Kashyap Over a year ago

hey @davidkonrad thanx for answer and sorry its typo mistake now can you give answer ?

Younux · Accepted Answer · 2018-02-17 23:17:16Z

0

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>

answered Feb 17, 2018 at 23:17

Younux

2842 silver badges7 bronze badges

Collectives™ on Stack Overflow

Input validations on table ng-repeat

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related