1

Estou tentando validar um formulário simples, onde quando o usuário deixa algum campo em branco uma div é mosrada com este erro. Segue o codigo

var playlistApp = angular.module('playlistApp', []);

playlistApp.controller("LucasCtrl", ['$scope', function($scope) {

  var vm = this;
  vm.IsErrorNome = false;

  $scope.validarCampos = function() {
    if ($scope.nome == null) {
      vm.IsErrorNome = true;
      return;
    }
  }

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<body ng-app="playlistApp" ng-controller="LucasCtrl">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="form">
          Nome:
          <input type="text" class="form-control" ng-model="nome">
          <div ng-show="IsErrorNome">Nome em branco</div>
          Idade:
          <input type="number" class="form-control" ng-model="idade"> Endereço:
          <input type="text" class="form-control" ng-model="endereco"> Telefone de contato:
          <input type="text" class="form-control" ng-model="endereco">
          <br>
          <input type="submit" ng-click="validarCampos()" value="Próximo >" class="btn btn-success pull-right">
        </div>
      </div>
    </div>
  </div>
</body>

Porém, a div não aparece ao clicar no submit, debuguei pelo chrome e vi que os estados estao sendo alterados... Alguem pode me ajudar? Obrigado

1 Resposta 1

1

O exemplo abaixo trabalha com o elemento form para gerenciar validações de conteúdo.

Note que ele recebe um nome, userForm. Isso é importante porque o Angular tando adiciona uma menção ao formulário ao escopo do controller quanto funcionalidades para checar a causa dos erros de validação.

Cada controle também tem a sua propriedade name preenchida. No exemplo eu utilizei o mesmo nome utilizado no ng-model.

Você pode então utilizar:
- [nomeDoFormulario].[nomeDoCampo].$valid- para determinar se aquele campo é válido;
- [nomeDoFormulario].[nomeDoCampo].$error - para acessar a justificativa do erro de validação do campo.
- [nomeDoFormulario].$valid - para verificar se o formulário não possui nenhum outro erro de validação.

var playlistApp = angular.module('playlistApp', []);

playlistApp.controller("LucasCtrl", ['$scope', function($scope) {

  $scope.validarCampos = function() {
  	if ($scope.userForm.$valid) {
		alert('Seu formulário está corretamente preenchido.');
  			}
  }
}]);
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
  <body ng-app="playlistApp" ng-controller="LucasCtrl">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
        <form name="userForm" ng-submit="validarCampos()" novalidate class="form">
            <table>
              <tr>
                <td class="border-bottom" ng-class="{'border-success': userForm.nome.$valid, 'border-warning': userForm.nome.$invalid}">
                  Nome
                </td>
                <td><input type="text" class="form-control" name="nome" ng-model="nome" required></td>
              </tr>
              <tr>
                <td class="border-bottom" ng-class="{'border-success': userForm.idade.$valid, 'border-warning': userForm.idade.$invalid}">
                  Idade
                </td>
                <td><input type="number" class="form-control" name="idade" ng-model="idade" min="18"></td>
              </tr>
              <tr>
                <td class="border-bottom" ng-class="{'border-success': userForm.endereco.$valid, 'border-warning': userForm.endereco.$invalid }">
                  Endereço
                </td>
                <td><input type="text" class="form-control" name="endereco" ng-model="endereco" ng-minlength="3"></td>
              </tr>
              <tr>
                <td class="border-bottom" ng-class="{'border-success': userForm.telefone.$valid, 'border-warning': userForm.telefone.$invalid }">
                  Telefone de contato
                </td>
                <td><input type="text" class="form-control" name="telefone" ng-model="telefone"></td>
              </tr>
              <tr>
                <td colspan=2><input type="submit" value="Próximo >" class="btn btn-success pull-right" ng-disabled="!userForm.$valid"/></td>
              </tr>
            <table>

            <div ng-show="userForm.nome.$error.required">O campo nome é mandatório.</div>
            <div ng-show="userForm.idade.$error.min">Se informada, a idade deve ser maior ou igual a 18 anos.</div>
            <div ng-show="userForm.endereco.$error.minlength">Se informado, o endereço deve possuir no mínimo 20 caracteres.</div>

            </form>
          </div>
        </div>
      </div>
    </div>
  </body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .