Como implementar a validação de formulário em Angular JS?

A validação é um método para autenticar o usuário. É usado em todas as tecnologias da Web como e . Mas hoje nosso foco será na validação em Angular JS na seguinte ordem:

• O que é validação de formulário?
• Validação de formulário em Angular JS
• Etapas na validação do formulário
• Código

O que é validação de formulário?

A validação de formulário é uma técnica pela qual podemos validar o formulário HTML. Vamos dar um exemplo simples para supor que um usuário tem um formulário HTML e que o formulário HTML tem campos diferentes, esses campos são validados pelo validador de formulário quando queremos validar o formulário, só precisamos verificar o valor do campo específico com a expressão do validador .

Se a expressão regular e o valor do campo forem iguais, podemos dizer que nosso formulário está validado. No formulário HTML, existem diferentes tipos de validações como e-mail, obrigatório, mínimo, máximo, senha, etc.

Validação de formulário em Angular JS

Vamos falar sobre como podemos validar um formulário em JS angular. Angular JS fornece vários tipos de propriedades de validação de formulário que podemos usar para validar o formulário ou obter os dados do formulário.

• $ válido : Esta propriedade informa se o campo é válido ou não, aplicando a regra apropriada nele.

• $ inválido : Como o nome diz inválido, essas peças se o campo for inválido ou não com base na regra apropriada sobre isso.

• $ pristine : Retornará verdadeiro se o campo de entrada do formulário não for usado.

  
  
  

• $ sujo : Retornará verdadeiro no campo de entrada do formulário usado.

• $ tocou : BooleanTrue se a entrada foi desfocada.

Para acessar o formulário: .

Para acessar uma entrada: ..

Agora vamos explicar a validação do formulário no Angular JS com um exemplo, então primeiro fazemos dois arquivos, um é app.js e outro é index.html. Nosso arquivo index.htm contém um formulário HTML simples que possui a validação angular e nosso arquivo app.js contém o código de backend para lidar com a validação do formulário na página index.html.

oindex.htmlformulário de conteúdo da página comnovalidarpropriedade e o que isso significa exatamente?

A propriedade novalidate na tag do formulário informa ao HTML que podemos usar nossa validação de formulário personalizado. Se não fornecermos a propriedade novalidate, o formulário HTML será validado usando as propriedades de validação do formulário padrão HTML5.

Etapas na validação do formulário

Em nosso formulário, criamos 6 campos em nosso formulário: nome, sobrenome, e-mail, telefone, senha e mensagem.

1. Primeiro, adicionamos o validador de campo obrigatório, este validador informa aos usuários que um campo específico é obrigatório.

2. Em seguida está o campo de e-mail, se um usuário não fornecer nenhum e-mail válido, nosso validador de e-mail gerará um erro de validação de e-mail.

3. Definimos o comprimento mínimo e máximo em nossa validação de senha, o comprimento mínimo é 5 e o comprimento máximo é 8 para que o usuário possa fornecer uma senha válida entre 5 a 8 caracteres.

4. Por fim, definimos o telefone e os campos de mensagem necessários e, especificamente, aplicamos a validação do número no campo do telefone.

Código para validação de formulário em Angular JS

index.html

Exemplo de escopo angular Nome 
 
Este campo é obrigatório
aprender ssis passo a passo
Último nome 
 
Este campo é obrigatório
O email 
 
Este campo é obrigatório
 
Não é um email válido
telefone 
 
Este campo é obrigatório
 
Este não é um telefone válido
Senha 
 
Este campo é obrigatório
 
Senha entre 5 a 8 caracteres
mensagem 
 
Este campo é obrigatório
Enviar

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', function ($ scope) {})

Vamos falar sobre algumas diretivas de validação usadas no formulário:

• ng-required : Para fornecer o campo obrigatório
• ng-show : Para mostrar a mensagem de erro com base na condição (verifique as propriedades de validação)
• de minlength : Por fornecer comprimento mínimo
• ng-maxlength : Para fornecer o comprimento máximo
• de padrão : Para corresponder a um padrão específico
• modelo ng : Vincula o campo com propriedades de validação como $ error, $ valid, etc.

Com isso, chegamos ao fim deste artigo sobre Validação em Angular JS. Espero que você tenha entendido as várias coisas a serem consideradas para a validação de formulário no Angular JS.

Se você deseja saber mais sobre a estrutura Angular, consulte nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento o ajudará a entender o Angular em profundidade e a obter domínio sobre o assunto.

Tem alguma questão para nós? Mencione isso na seção de comentários deste artigo e entraremos em contato com você.