CODEWITHSUNDEEP
angularjs
suman j
suman j

Reputation: 6960

AngularJs dynamic name for a form inside ng-repeat

How do I name a form inside ng-repeat with a dynamic name?

<div ng-repeat="item in itemList">
 <form name="item_details" ng-class="validateForm(item_details)">
   //few form elements
 </form>
</div>

I want to name each form dynamically. For example add the $index to the name of the form. How do I achieve it? I tried ng-init on ng-repeat but did not work.

Upvotes: 24

Views: 12866

Answers (2)

Todd Hirsh
Todd Hirsh

Reputation: 51

You may access the instance of the form by the dynamic name using bracket notation:

<div ng-repeat="item in itemList">
  <form name="item_details{{$index}}" ng-class="validateForm(this['item_details' + $index])">
    //few form elements
  </form>
</div>

Upvotes: 2

New Dev
New Dev

Reputation: 49590

You can just do:

<form name="item_details{{$index}}" ng-class="validateForm('item_details'+$index)">

EDIT:

You can use ng-init as well, like so:

<div ng-repeat="item in itemList" ng-init="formName = 'item_details' + $index">
 <form name="{{formName}}" ng-class="validateForm(formName)">
   //few form elements
 </form>
</div>

If it's just to apply a class based on validity of the form, then you could apply styling to automatically added classes, such as: ng-valid:

.ng-valid {
   background-color: green;
}

Upvotes: 21

Related Questions