Class has-error does not disappear from field

Question

Class has-error does not disappear from field

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Given a client form, valid fields are required. Required fields that are not filled in are automatically highlighted on the page to make the user's life easier. So far 100%. As the user sees the remaining required fields and starts to populate, the highlight (has-error class of the bootstrap) disappears, normalizing that field.

It happens that with only one field on my form, this behavior does not occur, that is, the field is highlighted at the time of the validation, when the user starts typing, it remains highlighted as if it were not filled. >

Field on page (also validated if $ dirty and not populated):

<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 validation and highlighting, the field works normally when typed (depending on the others). So, it just does not work when the first thing I do is click the save button, with that field still virgin / intact ($ pristine)

angularjs front-end

asked by anonymous 30.12.2016 / 03:06

2 answers

1

Great approach! I was not really happy with filtering in the required fields with jQuery. I just had to adapt the ng-class of the input, because 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 you type something, delete what you typed and leave the field, the highlighting is already applied.

31.12.2016 / 00:02

Is there any way to change a column of an existing table to "auto increment"? Pass data from api volley to another screen

score 1 · Accepted Answer

Angle is conflicting with jquery

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

I advise you to place a form validation by setting it in the controller whether it is valid or not (as shown below). With this validation, I believe that $ dirty will no longer be necessary.

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><scriptsrc="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>