Verification of input on ng-repeat table

Question

Verification of input on ng-repeat table

I am working on an AngularJS app and have a table with ng-repeat where I have textboxes in td. I want to validate these textboxes so I tried using ng-form and ng-class, but I keep getting an invalid expression error.

Here is my code:

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

Unfortunately, that did not work. I then attempted this:

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

But that also did not work.

If anyone can suggest the correct way to achieve this, I would greatly appreciate it. Thank you in advance!

javascript angularjs angularjs-ng-repeat

Answer 1

Answer №1

The correct way to write it is by using ng-class="{...}" instead of ng-class=:{...}
Remember to put quotes around the input name, for example:
```
ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}"
```
, as you are trying to access a non-existent variable called abc-pqr-xx
If you are referring to $dirty, the input must have an ng-model

A corrected version of the markup could be:

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

Answer 2

The correct way to write it is by using ng-class="{...}" instead of ng-class=:{...}
Remember to put quotes around the input name, for example:
```
ng-class="{'has-error':formName['abc-pqr-{{item.id}}'].$dirty}"
```
, as you are trying to access a non-existent variable called abc-pqr-xx
If you are referring to $dirty, the input must have an ng-model

A corrected version of the markup could be:

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

Answer 3

Answer №2

it just needs 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>

Answer 4

it just needs 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>

Verification of input on ng-repeat table

Answer №1

Answer №2

Similar questions

Is there a way to add a scrollbar to the ChartJS tooltip to avoid data

Experimenting with a function that initiates the downloading of a file using jest

Guide on converting a GraphQL request string into an object

Select Menu (Code Languages:CSS, JS, HTML, BBCode)

Angular's method of one-way binding to an object

Using an array to dynamically input latitude and longitude into a weather API call in PHP

Encountering a 404 error when attempting to post from a Node.js express app to a

Learn the process of updating a nested document within an array in MongoDB

Extjs: How to Select a Node After Creating a Tree Structure

Securing pages in Laravel and Vue JS: Restricting access to unauthorized users

Prevent scrolling with absolute positioning

The MEAN stack application is experiencing issues with loading images when accessed from a device other than localhost

Refresh database post drag and drop operation

Tips for altering the appearance of a button when moving to a related page

Is there a way to apply a consistent border to both the input radio button and its corresponding label once the radio button has been selected

The active tabs or placeholders do not update properly when I click on them

Simply tap on the image to include it in the HTML5 Canvas drawing

Utilize async/await to send images using node mailer

How can I handle JSON data that contains undefined values?

avoiding less than or greater than symbols in JavaScript