domingo, 4 de dezembro de 2016

Validação de campo em formulário

Em formulários para sinalizar para o usuário que o campo é inválido e o porque normalmente coloco uma borda vermelha no input e / ou um x vermelho ao lado, com tooltip com o motivo nos dois.

Um exemplo:

<div ng-class="{'has-error' : (formCrud.$submitted && formCrud.email.$error.required) || formCrud.email.$error.email}">
    <label>E-mail</label>
    <input type="email" id="email" name="email" class="campo-maior text-lowercase" ng-model="paciente.email" required
           uib-tooltip="{{(formCrud.$submitted && formCrud.email.$error.required ? MENSAGEM.OBRIGATORIO : MENSAGEM.FORMATO_INCORRETO)}}" 
           tooltip-enable="(formCrud.$submitted && formCrud.email.$error.required) || formCrud.email.$error.email" />
    <span ng-show="(formCrud.$submitted && formCrud.email.$error.required) || formCrud.email.$error.email
          class="glyphicon glyphicon-remove text-danger" 
          uib-tooltip="{{(formCrud.$submitted && formCrud.email.$error.required ? MENSAGEM.OBRIGATORIO : MENSAGEM.FORMATO_INCORRETO)}}"></span>
    <span ng-show="!formCrud.email.$error.required && !formCrud.email.$error.email" class="glyphicon glyphicon-ok text-success"></span>
</div>


Mas a repetição em destaque me incomodava (code smells), se precisar alterar a condição teria alguns pontos a fazer.
Pensava em criar uma diretiva e criar watchers quando necessário e variáveis para controle, mas não me parecia ainda opção adequada por ainda achar burocrática.

Então percebi que podia criar variáveis no html.

<div ng-class="{'has-error' : emailInvalid}">
    <label>E-mail</label>
    <input type="email" id="email" name="email" class="campo-maior text-lowercase" ng-model="paciente.email" required
           uib-tooltip="{{mensagemEmail}}" tooltip-enable="emailInvalid" />
    <span ng-show="emailInvalid = (formCrud.$submitted && formCrud.email.$error.required) || formCrud.email.$error.email
          class="glyphicon glyphicon-remove text-danger" 
          uib-tooltip="{{mensagemEmail = (formCrud.$submitted && formCrud.email.$error.required ? MENSAGEM.OBRIGATORIO : MENSAGEM.FORMATO_INCORRETO)}}"></span>
    <span ng-show="!formCrud.email.$error.required && !formCrud.email.$error.email" class="glyphicon glyphicon-ok text-success"></span>
</div>