I have a problem when using a form with ng-repeat and pagination. I know the root of the problem but I dont know how to solve it...
I have a table inside a form
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start;
return input.slice(start);
}
return [];
};
});<form name="dataForm">
<tr ng-repeat="data in filteredData = (data | startFrom: (currentPage-1) * itemsPerPage | limitTo: itemsPerPage) track by $index">
.....
</tr>
</form>
<!-- Pagination -->
<ul class="pull-right" uib-pagination max-size="5" total-items="data.length" ng-model="currentPage" items-per-page="itemsPerPage"></ul>
<!-- Save Button should only be enabled is the form is valid -->
<button class="btn btn-primary" ng-disabled="dataForm.$invalid">Save</button>The problem I had was on Page 1 the Save button was disabled because I had errors in Page 1 inputs (Correct) but if I went to Page 2 which didn't had any errors the Save button was enabled so the user can bypass the disabled button...
I'm pretty sure the problem is because the filters are removing the DOM elements from the form and the form without page 1 DOM elements is indeed valid. I think I need a way to hide the elements instead of removing them from the DOM.
Any help?