I am building an Angular form that needs repeatable form elements inside an ngRepeat.

<form name="form">
    <div ng-repeat="x in [1,2,3,4]">
      <input name="something_{{$index}}" ng-model="hi" required>
      <div ng-messages="form.something_{{$index}}.$error">
        <ng-message="required">This is required</ng-message>
      </div>
    </div>
    <pre>{{form | json: 4}}</pre>
  </form>

Angular now supports dynamically declared input names so that you don't have to do something like:

<div ng-repeat="x in [1,2,3,4] ng-form="repeated-form"></div>

And you can use {{$index}} inside the ngRepeat to declare items dynamically. But this doesn't seem to work with ngMessages, which throws an error when I try to bind the index into it.

i.e. this:

<div ng-messages="form.something_{{$index}}.$error">

throws this:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 16 of the expression [form.something_{{$index}}.$error] starting at [{{$index}}.$error].

How can we dynamically declare which property on the form to watch, if ng-messages can't watch the form value that is declared with its {{$index}}?

PLNKR: (check console)

I am building an Angular form that needs repeatable form elements inside an ngRepeat.

<form name="form">
    <div ng-repeat="x in [1,2,3,4]">
      <input name="something_{{$index}}" ng-model="hi" required>
      <div ng-messages="form.something_{{$index}}.$error">
        <ng-message="required">This is required</ng-message>
      </div>
    </div>
    <pre>{{form | json: 4}}</pre>
  </form>

Angular now supports dynamically declared input names so that you don't have to do something like:

<div ng-repeat="x in [1,2,3,4] ng-form="repeated-form"></div>

And you can use {{$index}} inside the ngRepeat to declare items dynamically. But this doesn't seem to work with ngMessages, which throws an error when I try to bind the index into it.

i.e. this:

<div ng-messages="form.something_{{$index}}.$error">

throws this:

Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 16 of the expression [form.something_{{$index}}.$error] starting at [{{$index}}.$error].

How can we dynamically declare which property on the form to watch, if ng-messages can't watch the form value that is declared with its {{$index}}?

PLNKR: http://plnkr.co/edit/4oOasbtffTgKqmxcppUG?p=preview (check console)

• javascript
• angularjs
• forms

• have you tried ng-messages="form.something_$index.$error" - just remove the {{ }} – Darren Wainwright Commented Aug 6, 2015 at 18:56
• Thanks for the response. That would be awesome! But it isn't properly interpolated. The end result html is <div ng-messages="form.something_$index.$error"> – nikk wong Commented Aug 6, 2015 at 18:57
• Try this <div ng-messages="form['something_'+$index].$error"> – steppefox Commented Aug 6, 2015 at 18:59
• Thanks for the help! Unfortunately, the result is the same! :-( Syntax Error: Token '[' is not a valid identifier – nikk wong Commented Aug 6, 2015 at 19:01
• ngBind (the {{ }} directive) executes at the same priority as ngMessages. That means that ngMessages might be processed before ngBind for the element (so ngMessages execution code will still see the untransformed {{expr}} text. – Tahsis Claus Commented Aug 6, 2015 at 19:04

2 Answers 2

ng-messages="form['something_' + $index].$error"

Should work. I generally wouldn't put {{ }} in any of the ng directives because most of the ng directives execute with priority level 0 (including the {{ }} directive, ngBind). Also, the ng directives all use $evaluate on their argument, so they look at variable values in the scope by default.

Priority 0 for multiple directives on the same element means that Angular can't guarantee which directive will be applied first. Because of that, it is generally best to avoid using ngDirectives together as behavior can vary. ngIf is an exception as it executes with priority 600 (which is why directives aren't evaluated for an ng-if element not currently in the DOM no matter what).

    <div ng-repeat="x in [0,1,2,3]">
      <input name="something_{{$index}}" ng-model="hi" required>
      <div ng-messages="form['something_' + $index].$error">
        <ng-message="required">This is required</ng-message>
      </div>
    </div>

http://plnkr.co/edit/k5nzkpkJwSuf5dvlMMZi?p=preview