Validando a entrada do usuário em um formulário no Angular JS

Muitas vezes vi desenvolvedores iniciantes lutando com a validação de entrada do usuário em aplicativos de página única AngularJS. Neste post, darei uma introdução rápida, mas útil, das validações no AngularJS; Considere este post como um documento de aprendizado básico a partir do qual você pode aprender mais.

Vamos começar com um exemplo, conforme mostrado na imagem abaixo. Você tem um formulário de registro com três campos com as seguintes restrições.

1. Nome: Obrigatório
2. E-mail: Obrigatório e digite E-mail
3. Senha: Obrigatório, digite senha e comprimento mínimo 6

Queremos validar as regras mencionadas acima no lado do cliente. Há duas maneiras pelas quais a validação do lado do cliente pode ser feita em um aplicativo de página única baseado em AngularJS:

• Usando as validações HTML5
• Using the AngularJS validation directives
• Uma combinação de ambos

HTML5 Validation

Aqui, criamos o formulário Adicionar usuário mostrado acima usando a marcação listada abaixo:

  <div class="row">
                <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               required
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               required
                               name="email"
                               ng-model="useremail"
                               class="form-control"                              
                               placeholder="Email">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               required
                               ng-model="userpassword"
                               name="password"                             
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" class="form-control btn btn-info">
                       </button>
                    </div>
                </form>
            </div>

Estamos aplicando toda a validação de usuário necessária usando as validações HTML 5.  Quando enviamos um formulário com dados de usuário inválidos, o HTML5 retornará um erro, conforme mostrado abaixo:

Esse erro na interface do usuário é retornado pelo HTML5. A validação de HTML5 não funcionará em navegadores que não suportam HTML5. Alguns pontos sobre as técnicas de validação são os seguintes:

• A validação não funcionará em navegadores não suporta HTML5
• O erro HTML 5 (como mostrado na imagem acima) será exibido para a entrada de usuário inválida
• A entrada de usuário inválida será definida como um valor indefinido no controlador

Agora vamos tentar ler o valor das entradas do usuário no controlador. Não se esqueça de anexar um controlador ao formulário.

console.log('user name : ' + $scope.userfullName);
console.log('user email : ' +$scope.useremail);
console.log('user password :' +$scope.userpassword);

Aqui estamos validando o formulário e as entradas do usuário usando a validação HTML 5. Podemos enviar o formulário mesmo que algumas das entradas sejam inválidas. O valor de entrada inválido seria definido como o indefinido no controlador. Como você pode ver na imagem abaixo, para o campo de e-mail, a entrada é inválida e, no controlador, o valor de e-mail inválido é definido como indefinido.

Duas observações importantes podem ser extraídas da técnica de validação acima:

1. Conseguimos enviar o formulário mesmo que o formulário não fosse válido
2. Para as entradas inválidas, o valor foi definido como indefinido no controlador

Se quisermos que o formulário não seja enviado quando for inválido, em vez de clicar no botão, usaremos a diretiva ng-submit no próprio formulário:

 <div class="row">
                <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               required
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               required
                               name="email"
                               ng-model="useremail"
                               class="form-control"                              
                               placeholder="Email">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               required
                               ng-model="userpassword"
                               name="password"                             
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" class="form-control btn btn-info">
                       </button>
                    </div>
                </form>
            </div>

No ng-submit, chamamos uma função AddUser do controlador com um parâmetro formname.$valid. Essa função de envio só será chamada quando um formulário for válido ou, em outras palavras, toda a entrada do usuário do formulário for válida. Lembre-se de que, neste caso, não será enviado se o formulário não for válido. No exemplo anterior, vimos que, mesmo que o formulário fosse inválido, poderíamos enviar o formulário e, para campos de entrada inválidos, o valor indefinido estava sendo passado no controlador. No entanto, aqui não podemos enviar o formulário se ele não for válido.

AngularJS Validation

Outra opção é validar a entrada do usuário apenas usando as diretivas AngularJS. Para trabalhar apenas com a validação do AngularJS, precisamos executar as seguintes tarefas –

1. Use novalidate no formulário para desabilitar a validação HTML.
2. Instead of HTML validations use AngularJS validation directives.

Podemos criar o formulário com as validações de usuário necessárias usando apenas as diretivas de validação do AngularJS, conforme mostrado na listagem abaixo:

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"                              
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               ng-required="true"
                               name="email"
                               ng-model="useremail"
                               class="form-control"                             
                               placeholder="Email">
                                            </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               ng-required="true"
                               ng-model="userpassword"
                               name="password"
                              ng-minlength="5"
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" ng-click="AddUser()" class="form-control btn btn-info">
                          Register
                        </button>
                    </div>
                </form>

Estamos usando o atributo novalidate para desabilitar a validação do HTML5 e validando a seguinte entrada do usuário:

1. Todos os campos são obrigatórios.
2. O comprimento mínimo do campo de senha é 6.

Ao enviar o formulário, a entrada do usuário será validada usando as diretivas de validação do AngularJS. Se o usuário não fornecer um valor para o nome ou fornecer menos de seis caracteres para o campo de senha, o formulário será enviado com o valor indefinido para as entradas de usuário inválidas.

Como você deve ter notado, quando não usamos validações HTML 5 e confiamos nas validações do AngularJS, duas coisas acontecem:

1. Os formulários são enviados mesmo que todas as entradas do usuário não sejam válidas
2. Nenhuma mensagem de erro é exibida para a entrada de usuário inválida

Desativar botão Enviar se o formulário não for válido

Podemos desativar o botão enviar se o formulário não for válido ou se alguma das entradas do usuário for inválida. Vamos usar a propriedade AngularJS$valid para desabilitar o botão enviar se o formulário for inválido:

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"                              
                               placeholder="Full Name">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="email"
                               ng-required="true"
                               name="email"
                               ng-model="useremail"
                               class="form-control"                             
                               placeholder="Email">
                                            </div>
                    <div id="name-group" class="form-group-lg">
                        <input type="password"
                               ng-required="true"
                               ng-model="userpassword"
                               name="password"
                              ng-minlength="5"
                               class="form-control "
                               placeholder="Password atleast 6 character">
                    </div>
                    <div id="name-group" class="form-group-lg">
                        <button type="submit" ng-disabled="!adduser.$valid" ng-click="AddUser()" class="form-control btn btn-info">
                          Register
                        </button>
                    </div>
                </form>

Aqui estamos usando a diretiva ng-disabled para desabilitar o botão. Como você pode ver na imagem abaixo, uma propriedade $valid é usada para verificar se o formulário é válido ou não. Não se esqueça que adduser é o nome do formulário.

Mostrar a mensagem de erro

Ao contrário das regras de validação do HTML5, por padrão, as diretivas de validação do AngularJS não exibem nenhuma mensagem de erro para a entrada inválida do usuário. No entanto, podemos mostrar a mensagem de erro conforme mostrado na listagem abaixo. Estamos usando as propriedades $valid e $pristine para exibir a mensagem de erro:

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                        <span class="help-block"
                               ng-show="adduser.name.$invalid && !adduser.name.$pristine">
                            You name is required.
                        </span>
                  </div>

A mensagem de erro será exibida conforme mostrado na imagem abaixo:

Estilizando a mensagem de erro e o controle de entrada

Usando as propriedades $valid e $pristine, podemos exibir a mensagem de erro e criar um estilo para ela usando a listagem abaixo:

<form name="adduser" novalidate>
                    <!-- NAME -->
                    <div id="name-group" class="form-group-lg" ng-class="{ 'has-error' : adduser.name.$invalid && !adduser.name.$pristine }">
                        <input type="text"
                               ng-required="true"
                               name="name"
                               ng-model="userfullName"
                               class="form-control"
                               placeholder="Full Name">
                        <span class="help-block"
                               ng-show="adduser.name.$invalid && !adduser.name.$pristine">
                            You name is required.
                        </span>
                  </div>

Agora, a mensagem de erro será exibida com o estilo conforme mostrado na imagem abaixo:

Lendo propriedades de validação no controlador

No controlador, podemos ler se o formulário é válido ou não, usando a propriedade $valid no nome do formulário. Se todas as entradas do usuário forem válidas, obteremos um valor de $valid propriedade true. Se o formulário é válido ou não, pode ser verificado no controlador, conforme mostrado na lista abaixo:

if ($scope.adduser.$valid) {
   alert('all inputs are valid ');
}
else {
   alert('all inputs are not valid ');
}

AngularJS Validation Properties

Ao trabalhar com a validação do AngularJS, as seguintes são propriedades importantes:

Podemos usar essas propriedades junto com o nome do formulário para executar várias tarefas de validação.

Então aí está! Exploramos como você pode usar uma combinação de validações HTML5 e diretivas de validação do AngularJS para validar o formulário e as entradas do usuário no AngularJS. Espero que você ache este post útil - obrigado por ler!