Validação de formulário AngularJS
AngularJS pode validar dados de entrada.
Validação de formulário
AngularJS oferece validação de formulário do lado do cliente.
O AngularJS monitora o estado do formulário e dos campos de entrada (input, textarea, select) e permite notificar o usuário sobre o estado atual.
O AngularJS também contém informações sobre se eles foram tocados, modificados ou não.
Você pode usar atributos HTML5 padrão para validar a entrada ou criar suas próprias funções de validação.
A validação do lado do cliente não pode por si só proteger a entrada do usuário. A validação do lado do servidor também é necessária.
Requeridos
Use o atributo HTML5 requiredpara especificar que o campo de entrada deve ser preenchido:
Exemplo
O campo de entrada é obrigatório:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Use o tipo HTML5 emailpara especificar que o valor deve ser um e-mail:
Exemplo
O campo de entrada deve ser um e-mail:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Estado do formulário e estado de entrada
O AngularJS está constantemente atualizando o estado do formulário e dos campos de entrada.
Os campos de entrada têm os seguintes estados:
$untouchedO campo ainda não foi tocado$touchedO campo foi tocado$pristineO campo ainda não foi modificado$dirtyO campo foi modificado$invalidO conteúdo do campo não é válido$validO conteúdo do campo é válido
São todas propriedades do campo de entrada e são ou true
ou false.
Os formulários têm os seguintes estados:
$pristineNenhum campo foi modificado ainda$dirtyUm ou mais foram modificados$invalidO conteúdo do formulário não é válido$validO conteúdo do formulário é válido$submittedO formulário é enviado
Elas são todas propriedades do formulário e são ou true
ou false.
Você pode usar esses estados para mostrar mensagens significativas ao usuário. Exemplo, se um campo for obrigatório e o usuário o deixar em branco, você deve dar um aviso ao usuário:
Exemplo
Mostrar uma mensagem de erro se o campo foi tocado E está vazio:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</span>
Classes CSS
AngularJS adiciona classes CSS a formulários e campos de entrada dependendo de seus estados.
As seguintes classes são adicionadas ou removidas dos campos de entrada:
ng-untouchedO campo ainda não foi tocadong-touchedO campo foi tocadong-pristineO campo ainda não foi modificadong-dirtyO campo foi modificadong-validO conteúdo do campo é válidong-invalidO conteúdo do campo não é válidong-valid-keyUma chave para cada validação. Exemplo:ng-valid-required, útil quando há mais de uma coisa que deve ser validadang-invalid-keyExemplo:ng-invalid-required
As seguintes classes são adicionadas ou removidas de formulários:
ng-pristineNenhum campo ainda não foi modificadong-dirtyUm ou mais campos foram modificadosng-validO conteúdo do formulário é válidong-invalidO conteúdo do formulário não é válidong-valid-keyUma chave para cada validação. Exemplo:ng-valid-required, útil quando há mais de uma coisa que deve ser validadang-invalid-keyExemplo:ng-invalid-required
As classes são removidas se o valor que elas representam for false.
Adicione estilos para essas classes para dar ao seu aplicativo uma interface de usuário melhor e mais intuitiva.
Exemplo
Aplique estilos, usando CSS padrão:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Os formulários também podem ser estilizados:
Exemplo
Aplique estilos para formulários não modificados (pristine) e para formulários modificados:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Validação personalizada
Criar sua própria função de validação é um pouco mais complicado; Você precisa adicionar uma nova diretiva ao seu aplicativo e lidar com a validação dentro de uma função com certos argumentos especificados.
Exemplo
Crie sua própria diretiva, contendo uma função de validação personalizada e faça referência a ela usando my-directive.
O campo só será válido 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>
Exemplo explicado:
Em HTML, a nova diretiva será referenciada usando o atributo
my-directive.
No JavaScript começamos adicionando uma nova diretiva chamada myDirective.
Lembre-se, ao nomear uma diretiva, você deve usar um nome camel case,
myDirective, mas ao invocá-lo, você deve usar -um nome separado,
my-directive.
Em seguida, retorne um objeto onde você especifica que exigimos ngModel, que é o ngModelController.
Faça uma função de ligação que receba alguns argumentos, onde o quarto argumento, mCtrl, é o ngModelController,
Em seguida, especifique uma função, neste caso chamada myValidation, que recebe um argumento, esse argumento é o valor do elemento de entrada.
Teste se o valor contém a letra "e" e defina a validade do controlador de modelo como trueou false.
Por fim, mCtrl.$parsers.push(myValidation);adicionará a
myValidationfunção a um array de outras funções, que serão executadas toda vez que o valor de entrada for alterado.
Exemplo de validação
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<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">Username
is required.</span>
</span>
</p>
<p>Email:<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">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</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 = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
O atributo de formulário HTML novalidate é usado para desativar a validação padrão do navegador.
Exemplo explicado
A diretiva ng-model do AngularJS vincula os elementos de entrada ao modelo.
O objeto de modelo tem duas propriedades: user e email .
Por causa do ng-show , os intervalos com color:red são exibidos somente quando o usuário ou email é $dirty e $invalid .