Using dynamically named form fields inside of ng-repeat

Question

My code:

<div class='span3' ng-repeat="intFilter in intFilters" 
    ng-class="{ 'has-error' : filter.{{intFilter.name}}.$invalid &&
                             !filter.{{intFilter.name}}.$pristine }">
    <label>{{intFilter.name}}</label>
    <select class="metricFilter" ng-init="intFilter.selectedOp=operators[0]" 
        ng-model="intFilter.selectedOp" ng-options='op for op in operators' >
    </select>
    <input name="{{intFilter.name}}" id="{{intFilter.name}}" 
           class='inputFilter' ng-model='intFilter.input' 
           placeholder="integer value" ng-pattern="onlyNumbers">
    <p style="color:red; font-size:11px;" 
       ng-show="filter.{{intFilter.name}}.$error.pattern" class="help-block">     
       {{intFilter.name}} is invalid!
    </p>
</div>

... where you can assume that {{intFilter.name}} outputs Borehole Depth.

Validation error messages are displaying from the page load itself. The space character between Borehole and Depth is giving error for me I think.

Is this is the right approach?

It's not obvious what you're getting at here. The code is clear, but can you provide more detail about what the problem is? For example, please elaborate on what you mean when you say "above {{intFilter.name}} is Borehole Depth" — Marc Kline
– Marc Kline, Commented Jun 5, 2014 at 16:35

Marc Kline · Accepted Answer · 2014-06-05 18:42:30Z

You can't use interpolation with the name attribute on your inputs. The issue has been under active discussion in the Angular community. Currently, unless you want to create a $decorator, your best bet is to use ng-form:

<form name="filter">
  <div class='span3' ng-repeat="intFilter in intFilters">
     <ng-form name="innerForm">
        <div ng-class="{ 'has-error' : innerForm.input.$invalid && !innerForm.input.$pristine }">
          <label>{{intFilter.name}}</label>
          <select class="metricFilter" ng-init="intFilter.selectedOp=operators[0]" 
              ng-model="intFilter.selectedOp" ng-options='op for op in operators' >
          </select>
          <input name="input" id="{{intFilter.name}}" 
                 class='inputFilter' ng-model='intFilter.input' 
                 placeholder="integer value" ng-pattern="/[0-9]+/">
          <p style="color:red; font-size:11px;" 
             ng-show="innerForm.input.$error.pattern" class="help-block">     
             {{intFilter.name}} is invalid!
          </p>
          {{intFilter.input}}
      </div>
    </ng-form>
  </div>
</form>

Demo

Artem Latyshev · Accepted Answer · 2014-06-05 17:35:15Z

0

You shouldn't use interpolation ({{}}) inside ng-class, if filter is the form name, then ng-class should look something like this:

ng-class="{ 'has-error' : filter[intFilter.name].$invalid && !filter[intFilter.name].$pristine }"

answered Jun 5, 2014 at 17:35

Artem Latyshev

5953 silver badges10 bronze badges

4 Comments

vamsi Over a year ago

how can I use it in ng-show="filter.{{intFilter.name}}.$error.pattern" this line

Artem Latyshev Over a year ago

The same, use filter[intFilter.name].$error.pattern

Artem Latyshev Over a year ago

Hard to say, maybe onlyNumbers is not a correct regexp. In any case you can add this line {{filter[intFilter.name].$error | json}} instead of '{{intFilter.name}} is invalid!' to see error object on the page.

Marc Kline Over a year ago

@ArtemLatyshev is correct about ng-class, but there is a more fundamental problem here involving dynamic form field names: github.com/angular/angular.js/issues/1404

Collectives™ on Stack Overflow

Using dynamically named form fields inside of ng-repeat

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related