I've been struggling on the solution to the following problem. I have a table in which every row is build dynamically by ngRepeat. Every row has four columns and in every column there is an input element. My question is - how can I validate these four input fields and show the row in red if at least one of this four inputs is invalid.
I've tried to accomplish it with the help of this answer - AngularJS dynamic form field validation. But maybe because I'm doing something wrong it didn't help
<form novalidate name="feedInputSpecificForm" ng-submit="save()">
<table class="table table-condensed cf-table">
<thead>
<tr>
<th class="text-center">{{ 'Feed input' | translate }}</th>
<th class="text-center">{{ 'Calcium' | translate }}</th>
<th class="text-center">{{ '(g/Kg)' | translate }}</th>
<th class="text-center">{{ 'DM/FM factor' | translate }}</th>
</tr>
</thead>
<tbody>
<tr ng-class="{'danger': feedInputSpecificForm.$invalid}"
ng-repeat="item in items">
<td width="20%" class="text-right">
<input ng-model="item.name" type="text" dynamic-name="{{ 'name_' + $index }}" required/>
</td>
<td width="30%" class="text-center">
<input ng-model="item.calcium" type="text" ng-pattern="/^[\d,\.]+$/i" dynamic-name="{{ 'ca_' + $index }}"
class="form-control" required/>
</td>
<td width="20%" class="text-center">
<select ng-model="item.ca_dm" class="form-control input-sm" dynamic-name="{{ 'ca_dm_' + $index }}" required>
<option value="dm">DM</option>
<option value="fm">FM</option>
</select>
</td>
<td width="30%" class="text-center">
<input ng-model="item.dm_fm_factor" type="text" ng-pattern="/^[\d,\.]+$/i"
dynamic-name="{{ 'dm_fm_factor_' + $index }}" class="form-control" required/>
</td>
</tr>
</tbody>
<tfoot class="feed-inputs-control">
<tr ng-if="type === 'specific'">
<td colspan="2" width="50%">
<button ng-click="onAdd()" type="button" class="btn btn-primary btn-sm">Add new feed</button>
</td>
<td colspan="2" width="50%">
<button type="submit" class="btn btn-primary btn-sm">Save</button>
</td>
</tr>
</tfoot>
</table>
</form>
