user1261710 user1261710 - 3 years ago 192
AngularJS Question

AngularJS - how to dynamically insert input name into error state?

I am writing a form with Angular 1.5 and I am using ngMessages.

My forms will be dynamically generated based on what I get back from the server.

E.g.

<!-- dynamic form -->
<div ng-repeat="entry in form.items track by entry.id">

<!-- item type 0, text input -->
<label ng-if="entry.itemtype === '0'" class="item item-input item-stacked-label" ng-class="{ 'has-error' : templateForm.{{entry.id}}.$invalid }">
<span class="input-label"><span ng-if="entry.mandatory === '1'">* </span>{{ entry.itemlabel }}</span>
<input type="text" name="{{ entry.id}}" ng-model="entry.value" placeholder="{{ entry.itemlabel }}" required="entry.mandatory === '1'">
</label>




I want to use the entry id to name the input element. How can I write this part:
ng-class="{ 'has-error' : templateForm.{{entry.id}}.$invalid }"?

I tried to do it without the {{}} and it did not work.

Answer Source

It can be done with this syntax angular 1.5.3+

templateForm[entry.id].$invalid
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download