Within my code, I have implemented the following directive:
App.directive("validateMsgFor", function(){
return{
templateUrl : "view/templates/validateMsgFor.html",
restrict: "E",
scope: {
field : "="
}
}
});
The template utilized by this directive is as follows:
<div ng-if="field.$dirty" ng-messages="field.$error">
<div ng-messages-include="view/messages.html"></div>
</div>
This template references the following HTML content:
<div class="messages">
<div ng-message="required">Campo Obrigatório</div>
<div ng-message="minlength">Necessário mais caracteres</div>
<div ng-message="maxlength">Necessário menos caracteres</div>
<div ng-message="email">E-mail inválido</div>
<div ng-message="compareTo">Deve corresponder com valor digitado anteriormente</div>
</div>
To implement these components, they can be used in the following manner:
<label>Departamento</label>
<select id="departamentos" ng-model="model.curso.departamento" name="departamento" ng-options="d.nome for d in departamentos track by d.id" ng-required="true">
<option value="">Selecione um Departamento</option>
</select>
<validate-msg-for field="mainForm.departamento"></validate-msg-for>
The functionality of displaying validation messages when errors are present and the field is marked as "dirty" is working as expected. However, upon navigating to a different page, the tab freezes, showing signs of high processor usage and possibly entering into an infinite loop which eventually breaks the page. This issue seems to only occur when the validation message is displayed, and removing it resolves the problem.
I am seeking advice on whether I am implementing these components correctly or if there are any suggestions to prevent this issue from occurring. The versions of Angular, Angular Route, and Angular Messages being utilized are all at 1.4.3.
Any insights or recommendations would be greatly appreciated.
Thank you.