has-error class does not disappear from the field

Question

Given a customer form, valid some mandatory fields. Mandatory fields that are not filled in are automatically highlighted on the page to make life easier for the user. So far 100%. As the user sees the remaining required fields and starts to fill in, automatically the highlight (bootstrap has-error class) disappears, normalizing that field.

It turns out that, with only one field of my form, this behavior does not occur, ie, the field is highlighted at the time of validation, when the user starts typing, it remains highlighted as if it was not filled.

Field on page (also validated if $Dirty is not filled in):

<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 that validates all fields when saving:

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: if I type anything in this field and then delete it, then I click save, after the validation and highlight, the field works normally when typed (as the others). So it just doesn’t work when the first thing I do is click the save button, with that field still intact/untouched ($pristine)

Answer 1

Great approach! I really wasn’t very happy with filtering in the mandatory fields with jQuery. I just had to adapt the ng-class of input, as I also consider $Dirty.

Follows:

<div class="form-group col-md-6" ng-class="{'has-error': vm.clienteForm.nome.$invalid && (vm.clienteForm.nome.$dirty || vm.formInvalido)}">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" class="form-control" ng-model="vm.cliente.nome" required />
</div>

ps: $Dirty is still necessary because if the user type something, delete what he or she typed and exit the field, the highlight is already applied.

Answer 2

Angular is conflicting with jquery

$('[required]').filter(function () {
        return !this.value.trim();
    }).parent().addClass('has-error');

I advise you to put a form validation setando in the controller if it is valid or not (as example below). With this validation, I believe $Dirty will no longer be needed.

angular
    .module('myApp', [])
    .controller('MyController', MyController);

function MyController(){
 var vm = this;
 vm.salva = salva;

function salva(cliente) {
  
    if (vm.clienteForm.$valid) {
      vm.formInvalido = false;  
      // Seu service
    } else {
        vm.formInvalido = true;
        // Seu service
     }
}
  };

div.has-error{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController as vm">
<form name="vm.clienteForm">
  <div class="form-group col-md-6" ng-class="{'has-error': vm.clienteForm.nome.$invalid && vm.formInvalido}">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" class="form-control" ng-model="vm.cliente.nome" required />
</div>
    
    <button ng-click="vm.salva(vm.cliente)">Salvar</button>
</div>
  </form>
  </div>