As I develop a single page application utilizing Angular and Breeze, the challenge of managing entities with dynamic validation arises. With a set of entities displayed on the page using data-ng-repeat, I implement in place validation through toggling between "edit" and "display" modes by controlling visibility using data-ng-hide and data-ng-show directives. However, only one entity can be in edit mode at a time.
In the edit mode div, multiple inputs are bound to the Breeze entity via data-ng-model, and the Breeze entity validation is integrated using data-z-validate based on the directive from Breeze labs documentation (http://www.breezejs.com/breeze-labs/breezedirectivesvalidationjs).
Simplified HTML structure:
<div data-ng-controller="payees as vm">
<div data-ng-repeat="payee in vm.payees">
<div data-ng-hide="payee.editing">
<span>{{payee.name}}</span>
<span>{{payee.addressLine1}}</span>
<span>{{payee.town}}</span>
<span>{{payee.postcode}}</span>
</div>
<div data-ng-show="payee.editing">
<input data-z-validate data-ng-model="payee.name" />
<input data-z-validate data-ng-model="payee.addressLine1" />
<input data-z-validate data-ng-model="payee.town" />
<input data-z-validate data-ng-model="payee.postcode" />
</div>
</div>
</div>
The issue arises when every input triggers the validation directive code for all items in the repeater, even those that are hidden. This leads to a performance concern especially with numerous entities as each input validation runs multiple times unnecessarily.
Seeking a solution to ensure validation occurs solely for the entity in edit mode or visible inputs only, optimizing performance. Any suggestions to accomplish this selective validation approach?