Validation of form - AngularJS

Question

Validation of form - AngularJS

Navigation

#1 by (1 votes)

1

I'm trying to validate a simple form, where when the user leaves some field blank a div is shown with this error. Follow the code

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><bodyng-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>

However, the div does not appear when clicking the submit, I debugged through the chrome and I saw that the states are being altered ... Can anyone help me? Thanks

angularjs view controller

asked by anonymous 28.01.2018 / 01:47

1 answer

How to link files in different folders? How to call an attribute of the class in another class in django

score 1 · Answer 1

The example below works with the form element to manage content validations.

Note that it gets a name, userForm . This is important because Angular adds a reference to the form to the controller scope and functionality to check the cause of the validation errors.

Each control also has its name property filled in. In the example I used the same name used in ng-model .

You can then use:
- [nomeDoFormulario].[nomeDoCampo].$valid - to determine if that field is valid;
- [nomeDoFormulario].[nomeDoCampo].$error - to access the justification of field validation error. - [nomeDoFormulario].$valid - to check if the form has no other validation error.

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