Problem with simple validation messages directive

Asked

Viewed 456 times

1

I have the following directive:

//diretiva responsavel por facilitar a passagem de campos para a validação
App.directive("validateMsgFor", function(){
    return{
        templateUrl : "view/templates/validateMsgFor.html",
        restrict:  "E",
        scope: {
            field : "="
        }
    }
});

And the template she uses is as follows::

<div ng-if="field.$dirty" ng-messages="field.$error">
    <div ng-messages-include="view/messages.html"></div>
</div>

which in turn uses the following html:

<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>

All this to be used as follows:

<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>

This works the way I expect, which is to show the message when there is a validation error and when the field is in "Dirty" status. However, when I click on another link, that is, when I go to another page, the tab freezes, starts to use the processor a lot, indicating some kind of infinite loop or something, and then the page breaks. I realized that this only happens when the message is appearing, and when I comment the tag , does not happen the problem.

My question is knowing what I’m doing wrong, isn’t that the way I’m supposed to wear it? And if anyone has any suggestions?

Versions of angular, angular-route and messages are 1.4.3. Thanks in advance.

angularjs angularjs-directives

1 answer

0


Well, I’ve made the following change:

<div ng-if="field.$dirty" ng-messages="field.$error" 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 ng-messages-include="view/messages.html"></div> -->
</div>

And now it works without breaking the page.

But I still don’t know why I made that mistake.

Browser other questions tagged angularjs angularjs-directives

You are not signed in. Login or sign up in order to post.