Arquivo da tag: Validation

AngularJS – Formulário

pic_angularOlá pessoal. Agora relato o que aprendi sobre formulários HTML com AngularJS.

O AngularJS fornece implementações básica de validação para a maiorias de input HTML5 (text, number, url, email, date, radio, checkbox), além de algumas diretivas de validação: required, pattern, minlength, maxlength, min, max, email, number, etc…).

As implementações básicas de validação estão descritas aqui: Angular input directive.

Detalhes sobre as validações dos inputs podem ser obtidos diretamente na referência oficial:

O framework também oferece propriedades booleanas que ajudam a validar os formulário e seus campos, dando informações sobre o a entrada de dados.

  • $dirty: Indica se o usuário interagiu com o formulário/campo.
  • $pristine: Indica se o usuário ainda não interagiu com o formulário/campo.
  • $valid: Indica se o formulário/campo possui valor válido.
  • $invalid: Indica se o formulário/campo campo possui valor válido.

As propriedades são acessadas no formulário (geral para todos os campos) ou diretamente no elemento (input, select ou textarea). Segue a seguinte nomenclatura:

  • Para formulário: <form name>.<angular propriedade>
  • Para o elemento de entrada: <form name>.<input name>.<propriedade>

Perante a todas estas informações descritas acima, demonstro um pequeno exemplo de validação de formulário.

HTML:

<form name="formDados" novalidate>
    <!--novalidate: necessário para anular as validações nativas do navegador para HTML5-->

    <select ng-model="lancamento.tipo" name="tipo" required>
        <option value="0">selecione...</option>
        <option ng-repeat="t in tipos" value="t.id">{{t.descricao}}</option>
    </select>
    <!--Validando se o valor é vazio (requerido)-->
    <span ng-show="formDados.tipo.$error.required">O TIPO é requerido.</span>
    <br />

    <input type="date" ng-model="lancamento.data" placeholder="data" name="data" required />
    <!--Validando se o valor é vazio (requerido) e a quantidade máxima de caracteres-->
    <span ng-show="formDados.data.$error.required">A DATA é requerida.</span>
    <span ng-show="formDados.data.$error.date">A DATA é inválida.</span>
    <br />

    <input type="text" ng-model="lancamento.obs" placeholder="observação" name="obs" required ng-maxlength="20" />
    <!--Validando se o valor é vazio (requerido) e a quantidade máxima de caracteres-->
    <span ng-show="formDados.obs.$error.required">A OBSERVAÇÃO é requerida.</span>
    <span ng-show="formDados.obs.$error.maxlength">A OBSERVAÇÃO deve ter no máximo 20 caracteres.</span>
    <br />

    <input type="number" ng-model="lancamento.valor" placeholder="valor" name="valor" min="0" />
    <!--Validando o valor é numérico-->
    <span ng-show="formDados.valor.$invalid">Não é um número válido.</span>
    <br />

    <!--O botão ficará desabilitado (ng-disabled) de o usuário não interagir com os campos tipo, obs e valor-->
    <input type="button" value="salvar" id="salvar" ng-click="salvar()"
            ng-disabled="!formDados.tipo.$dirty || !formDados.obs.$dirty || !formDados.valor.$dirty" />

</form>

Javascript (controller):

app.controller('LancamentosController', ['$scope', function ($scope) {

    $scope.tipos = [];
    
    $scope.lancamento = {
        tipo: 0,
        data: "",
        obs: "",
        valor: "", 
        cpf: ""
    };

    $scope.init = function () {
        //carregando os tipos
        if (localStorage.getItem("tps") != null) {
            $scope.tipos = JSON.parse(localStorage.getItem("tps"));
        }
    };

    $scope.salvar = function () {
       
        //testando se o formulário é valido
        if (!$scope.formDados.$valid) {
            
            alert('Verifique os campos');
        }
        else{
            alert('salvou');
        }
    }

    $scope.init();

}]);

É BOM OBSERVAR: O formulário e os elemento de entrada de dados possuem o atributo name, pois será utilizado para implementação das validações. As tags span com a mensagem da invalidação somente será mostrada (ng-show) conforme o retorno booleano da diretiva de validação.

Quando as validações nativas do AngularJS não atendem alguma regra do sistema, é por meio de diretivas que podemos criar validações customizadas. O exemplo abaixo implementa a validação customizada para validar CPF (o algoritmo de validação do CPF não foi disponibilizado por questão de espaço).

Javascript:

app.directive('cpfValido', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {

            scope.$watch(attrs.ngModel, function () {

                if (elem[0].value.length == 0)
                    ctrl.$setValidity('cpfValido', true);
                else if (elem[0].value.length < 11) {
                    //aplicar o algoritmo de validação completo do CPF
                    ctrl.$setValidity('cpfValido', false);
                }
                else ctrl.$setValidity('cpfValido', true);
            });
        }
    };
});

HTML:

<input type="text" ng-model="lancamento.cpf" name="cpf" cpf-valido />
<span ng-show="formDados.cpf.$error.cpfValido">CPF Inválido</span>
	

https://docs.angularjs.org/guide/forms

Habilitando suporte para HTML 5 no VisualStudio 2010

Para habilitar suporte para HTML 5 no VisualStudio 2010 é necessário instalar o Service Pack 1, disponível em

http://www.microsoft.com/download/en/details.aspx?id=23691.

Após sua instalação, abra o Visual Studio e no menu TOOLS > OPTIONS, e selecione grupo HTML Editor selecionando o item VALIDATION, marcando o TARGET como HTML5.

Ao criar um novo arquivo o intelisense mostra as novas tags do HTML 5.

Enquanto ainda não decoramos as novas implementações do HTML 5, é possível facilmente fazer sua validação por meio da barra HTML Sourcing Editing de validação do VS.

Agora é só brincar.