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.
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;
}
<form name="item_details{{$index}}" ng-class="validateForm(item_details{{$index}})"> validateForm method received undefined for form variable input.
validateFrom if all you need to do is to style the CSS
validateForm(formName) this functionYou 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>
