Boa noite pessoal, preciso da ajuda de vocês. ^^
Dado um formulário de cliente, valido alguns campos obrigatórios.
Os campos obrigatórios que não forem preenchidos são automaticamente destacados na página para facilitar a vida do usuário. Até aqui 100%. Conforme o usuário enxerga os campos obrigatórios restantes e começa a preencher, automaticamente o destaque (classe has-error do bootstrap) some, normalizando aquele campo.
Acontece que, com apenas um campo do meu formulário, este comportamento não ocorre, ou seja, o campo é destacado no ato da validação, quando o usuário começa a digitar, ele continua destacado como se não estivesse preenchido.
Campo na página (também validado caso seja $dirty e não esteja preenchido):
<div class="form-group col-md-6" ng-class="{'has-error': vm.clienteForm.nome.$invalid && vm.clienteForm.nome.$dirty}">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" class="form-control" ng-model="vm.cliente.nome" required />
</div>
Script que valida todos os campos ao salvar:
function salva(cliente) {
if (vm.clienteForm.$valid) {
ClienteService.salva(cliente)
.then(function () {
$location.path('/clientes');
});
} else {
$('[required]').filter(function () {
return !this.value.trim();
}).parent().addClass('has-error');
MensagensService.mostraMsgErro();
}
}
ps: se eu digito qualquer coisa neste campo e depois apago, aí clico em salvar. Após a validação e o destaque, o campo funciona normalmente ao ser digitado (conforme os demais). Logo, ele só não funciona quando a primeira coisa que eu faço é clicar no botão salvar, com aquele campo ainda virgem/intacto ($pristine)