Validação de formulário AngularJS

AngularJS pode validar dados de entrada.

Validação de formulário

AngularJS oferece verificação de formulário no cliente.

AngularJS monitora o estado do formulário e dos campos de entrada (input, textarea, select) e permite que você notifique o usuário sobre o estado atual.

AngularJS também contém informações sobre se eles foram tocados ou modificados.

Você pode usar atributos HTML5 padrão para verificar a entrada ou criar sua própria função de verificação.

A verificação do cliente não pode proteger sozinha a entrada do usuário. A verificação do servidor também é necessária.

required

Usar atributo HTML5 required O campo de entrada especificado deve ser preenchido:

instância

Este campo de entrada é obrigatório:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>Estado válido da entrada é:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Experimente você mesmo

email

Usar tipo HTML5 email O valor especificado deve ser um e-mail:

instância

Este campo de entrada deve ser um e-mail:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>Estado válido da entrada é:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Experimente você mesmo

Estado do formulário e estado do campo de entrada

AngularJS atualiza continuamente o estado do formulário e do campo de entrada.

Os campos de entrada têm os seguintes estados:

• $untouched Este campo ainda não foi tocado
• $touched Este campo foi tocado
• $pristine Este campo ainda não foi modificado
• $dirty Este campo foi modificado
• $invalid Conteúdo do campo inválido
• $valid Conteúdo do campo válido

Eles são atributos do campo de entrada, podem ser verdadeiros ou falsos.

O formulário tem os seguintes estados:

• $pristine Nenhum campo foi modificado
• $dirty um ou mais campos foram modificados
• $invalid Conteúdo do formulário inválido
• $valid Conteúdo do formulário válido
• $subscribed O formulário foi enviado

Eles são atributos do formulário, podem ser verdadeiros ou falsos.

Você pode usar esses estados para exibir mensagens significativas para o usuário. Por exemplo, se um campo é obrigatório e o usuário o deixou vazio, deve ser emitido um aviso para o usuário:

instância

Se o campo já foi tocado e estiver vazio, mostre a mensagem de erro:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">O nome é obrigatório.</span>

Experimente você mesmo

Classes CSS

AngularJS adiciona classes CSS aos formulários e campos de entrada com base em seus estados.

As seguintes classes foram adicionadas ao campo de entrada ou removidas do campo de entrada:

• ng-untouched Este campo ainda não foi tocado
• ng-touched Este campo foi tocado
• ng-pristine Este campo ainda não foi modificado
• ng-dirty Este campo foi modificado
• ng-valid Conteúdo do campo válido
• ng-invalid Conteúdo do campo inválido
• ng-valid-key Validar cada chave uma vez. Por exemplo:ng-valid-requiredé muito útil quando há vários conteúdos a serem validados.
• ng-invalid-key Por exemplo:ng-invalid-required

As seguintes classes foram adicionadas ao formulário ou removidas do formulário:

• ng-pristine Nenhum campo ainda não foi modificado
• ng-dirty Um ou mais campos foram modificados
• ng-valid Conteúdo do formulário válido
• ng-invalid Conteúdo do formulário inválido
• ng-valid-key Validar cada chave uma vez. Por exemplo:ng-valid-requiredé muito útil quando há vários conteúdos a serem validados.
• ng-invalid-key Por exemplo:ng-invalid-required

Se o valor representado pela classe for falseentão essas classes serão removidas.

Adicione estilos a essas classes para fornecer uma interface do usuário melhor e mais intuitiva para sua aplicação.

instância

Aplicar estilos CSS padrão:

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

Experimente você mesmo

Também pode configurar o estilo do formulário.

instância

Aplicar estilos para o formulário original (não modificado) e o formulário modificado:

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

Experimente você mesmo

Validação Personalizada

Criar uma função de validação personalizada requer algumas técnicas; você deve adicionar uma nova diretiva ao aplicativo e usar alguns parâmetros de tratamento específicos para lidar com a validação interna.

instância

Crie sua própria diretiva, contendo uma função de validação personalizada e utilize my-directive referenciá-lo.

Este campo é válido apenas se o valor contiver o caractere "e":

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        };
        return value;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});
</script>

Experimente você mesmo

Em HTML, a nova diretiva será utilizada através da propriedade my-directive para referenciá-lo.

Em JavaScript, primeiramente adicionamos uma chamada para myDirective nova diretiva.

Lembre-se, ao nomear uma diretiva, você deve usar nomes em caixa alta, como myDirectiveMas ao chamá-lo, você deve usar nomes separados por hífen, como my-directive.

Então, retorne um objeto onde especifiquemos o que precisamos ngModelou seja ngModelController.

Crie uma função de link que aceita alguns parâmetros, onde o quarto parâmetro mCtrl é ngModelController.

Então, especifique uma função, neste exemplo chamada myValidationEle aceita um parâmetro, que é o valor do elemento de entrada.

Teste se o valor contém a letra "e" e configure a validade do controlador do modelo. true ou false.

Finalmente,mCtrl.$parsers.push(myValidation); serão myValidation Função adicionada ao array de outras funções, essas funções serão executadas sempre que o valor de entrada mudar.

Exemplo de Validação

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>Exemplo de Validação</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Nome de usuário:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">O nome de usuário é obrigatório.<</span>
  </span>
</p>
<p>E-mail:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">O e-mail é obrigatório.</span>
  <span ng-show="myForm.email.$error.email">Endereço de e-mail inválido.</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {}}
  $scope.user = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Experimente você mesmo

Atributo de Formulário HTML novalidate Usado para desativar a validação padrão do navegador.

Exemplo de Explicação:

Directivas AngularJS ng-model Ligar o elemento de entrada ao modelo.

O objeto modelo tem duas propriedades:user e email.

devido a ng-showapenas quando o user ou email for $dirty e $invalid apenas quando os spans tiverem a cor: red.