In my table, I used the <tr> tag repeatedly with
ng-repeat="cancellationPercentData in cancellationPercent"Each tr tag contains a form with name and id set using $index
See the code snippet below:
<tbody>
<tr ng-repeat="cancellationPercentData in cancellationPercent">
<form name="{{ $index }}editPercentageForm" id="{{ $index }}editPercentageForm" novalidate>
<td class="form-group">
<input type="number" name="{{ $index }}editFromHours" ng-model="cancellationPercentData.fromHours" class="form-control" ng-disabled="disableField" id="{{ $index }}fromHours" required/>
<p ng-show="{{ $index }}editPercentageForm.{{ $index }}editFromHours.$touched && {{ $index }}editPercentageForm.{{ $index }}editFromHours.$invalid" class="text-danger">This field is required</p>
<td class="form-group">
<input type="number" name="{{ $index }}edittoHours" ng-model="cancellationPercentData.toHours" class="form-control" ng-disabled="disableField" id="{{ $index }}toHours" required/>
<p ng-show="{{ $index }}editPercentageForm.{{ $index }}edittoHours.$touched && {{ $index }}editPercentageForm.{{ $index }}edittoHours.$invalid">This field is required</p>
<p ng-show="{{ $index }}edittoHours>={{ $index }}editFromHours" class="text-danger">To Hours should not be more than to Hours</p>
</td>
<td class="form-group">
<input type="text" name="{{ $index }}editPer" ng-model="cancellationPercentData.percentage" class="form-control" ng-disabled="disableField" id="{{ $index }}percentage" required/>
<p ng-show="{{ $index }}editPercentageForm.{{ $index }}editPer.$touched && {{ $index }}editPercentageForm.{{ $index }}editPer.$invalid">This field is required</p>
</td>
<td class="form-group">
<button class="btn btn-success col-xs-12" type="button" ng-click="disableField = false" ng-show="disableField" style="margin-bottom: 1%;">Edit</button>
<button class="btn btn-success col-xs-12" type="submit" style="margin-bottom: 1%;" ng-disabled="{{ $index }}editPercentageForm.$invalid" ng-click="updateCancellations(cancellationPercentData, $index+'fromHours', $index+'toHours', $index+'percentage')" ng-show="disableField == false">Update</button>
<button class="btn btn-primary col-xs-12" type="button" ng-click="deleteCancellations(cancellationPercentData)" style="margin-bottom: 1%;">Delete</button>
</td>
</form>
</tr>
</tbody>
The tr tags are repeating correctly, but there seems to be an issue with the positioning of the form inside the tr tag.
When inspecting the code in the browser, it appears that the form tag is not nested within the td tags as expected.
This unexpected behavior could be affecting the form validations.
If possible, please provide some guidance on resolving this issue. Thank you!