Angular radio button validation with an ng- repeat

Question

I'm running into an interesting Angular validation issue. I need to make sure that radio buttons are selected (they might not have a default value when loaded). The values for the radio buttons are iterated over from an array using ng-repeat. This whole thing also happens inside another ng-repeat for a list of users.

The issue is that I have to set a unique/dynamic name attribute on each group of related radio buttons, otherwise selecting one will unselect others in a different row. The validation in based on the name attribute and I cannot seem to find a way to use this unique/dynamic name in the needed ng-class and ng-show expressions.

This is waht is not working: ng-show="userFormRow.service-{{$index}}.$invalid"

Here's a sample of the code in context:

<table class='table table-striped table-bordered'>
    <tbody>
      <tr ng-repeat="u in users"
          ng-form="userFormRow">
        <td>
          <!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
          <div class="form-group"
               ng-class="{'has-error': userFormRow.service-{{$index}}.$invalid }">
            <label class="control-label center-block">Service</label>
            <div class="radio-inline" ng-repeat="o in serviceOptions">
              <label>
                <!-- HERE is where I define the unique name attribute based on the index of the table repeater -->
                <input type="radio"
                       name="service-{{$parent.$index}}"
                       value="{{::o}}"
                       ng-model="u.Service"
                       ng-required="!u.Service"> {{::o}}
              </label>
            </div>

            <!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
            <p class="help-block" ng-show="userFormRow.service-{{$index}}.$invalid">A service must be selected!</p>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

And here is a full code example.http://codepen.io/chrismbarr/pen/eNoGLJ?editors=101 Check the console for errors

dfsq · Accepted Answer · 2015-08-13 14:36:00Z

2

You should use bracket notation to access variable object property:

ng-show="userFormRow['service-' + $index].$invalid"

and same with ngClass:

ng-class="{'has-error': userFormRow['service-' + $index].$invalid }"

Demo: http://codepen.io/anon/pen/rVbYpG?editors=100

answered Aug 13, 2015 at 14:36

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular radio button validation with an ng- repeat

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related