0

I've got a table of packages produced by ng-repeat. I'm using bootstrap validation. It works fine on pages where there's only one record requiring input, but here I'm dealing with a repeater.

<form name="packingVm.PackageForm" ng-submit="packagingVm.ShipNow()" novalidate ng-init="submitted=false">
    <table>
        <thead>
            <tr>
                <th>Package Id</th>
                <th>Width</th>
            </tr>
        </thead>
        <tbody data-ng-repeat="package in packagingVm.Packages track by $index">
            <tr>
                <td>{{package.Id}}</td>
                <td class="col-xs-1">
                    <input name="Width" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
                    <div class="error-message" ng-show="packagingVm.PackageForm.Width.$invalid && packagingVm.PackageForm.Width.$touched || package.submitted">
                        <span ng-show="packagingVm.PackageForm.Width.$error.required">Required.</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</form>

What's happening is the rows are locked together. Getting an error on one row shows the error message on all rows.

I mean, I get why - I only have one packagingVm.PackageForm.Width, not one per row - but I don't know how to fix it.

Searching for bootstrap required ng-repeat isn't getting me much joy.

DaveC426913
  • 2,012
  • 6
  • 35
  • 63

2 Answers2

2

Answered here:

AngularJS required field validation in ng-repeat

Make the control name, and all references to it, dynamic, by adding {{$index}} to it, thus:

<tbody data-ng-repeat="package in packagingVm.Packages">
        <tr>
            <td>{{package.Id}}</td>
            <td class="col-xs-1">
<input name="Width_{{$index}}" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
                    <div class="error-message" ng-show="packagingVm.PackageForm.Width_{{$index}}.$invalid && packagingVm.PackageForm.Width_{{$index}}.$touched || package.submitted">
                        <span ng-show="packagingVm.PackageForm.Width_{{$index}}.$error.required">Required.</span>
                    </div>
Community
  • 1
  • 1
DaveC426913
  • 2,012
  • 6
  • 35
  • 63
0

What I can see, you are using the repeat for packagingVm.Packages but the required parts are dependent on packagingVm.PackageForm. You should have the specific required properties for each package(input). Else for all the inputs, one property of the controller is changed on which all required divs are dependent. So it shows for all the inputs.

SamGhatak
  • 1,487
  • 1
  • 16
  • 27