em Angular

Angular: template forms, utilizando formulários no Angular

Template forms no Angular é uma forma declarativa de trabalhar com forms no componente do Angular. Com template forms nós utilizamos a diretiva ngModel nos inputs que são controlados pelo Angular.

Quando criamos a diretiva <form> em um template o Angular associa implicitamente a diretiva ngForm no formulário.

É através desta diretiva que podemos determinar se um formulário está em estado: dirty, pristine e touched e ainda especificar a validade e valor de um campo. Lembrando que é necessário utilizar a diretiva ngModel nos inputs especificando o atributo name. Exemplo:

<input type="text" name="campo1" ngModel/>

Para fazer a carga default de um valor no input você pode utilizar oneway binding ou two way binding com os exemplos abaixo:

A especificação do OneWay Binding é feita através da diretiva [ngModel] assim como no exemplo acima. Quando o valor do componente mudar o campo input também é alterado.

Para que a alteração do campo também reflita no componente e vice-versa é necessário utilizar two way bindig utilizando a diretiva [(ngModel)].


Template Variables
Você pode obter uma referência ao ngForm utilizando template variables. Com isto você pode por exemplo testar a validade de um formulário como no exemplo. Veja o exemplo grifado em branco abaixo:

A diretiva ngModel disponibiliza as diretivas de estado:
valid | invalid | pristine | dirty | touched | untouched

Especificações:
Valid: Se o campo está de acordo com as regras de validação
Invalid: se o campo não está de acordo com as regras de validação
Pristine: se o campo está como no estado inicial
Dirty: se o campo já teve alguma modificação
Touched: se o campo já foi tocado
Untouched: se o campo ainda não foi tocado

Para obter este estado atual do campo você precisa ter uma referência para o ngModel do campo. Para isto você pode utilizar o template variables.

Validações de formulários

As validações que podemos especificar para um campo são:
required | pattern – regex | min-length | max-length

Classes CSS para feedback visual

O Angular associa as classes:
ng-valid | ng-invalid | ng-pristine | ng-dirty | ng-touched | ng-untouched

Exemplo de validação de formulário

Levaremos em consideração o exemplo abaixo:

<div class="col-sm-6 col-xs-12">
                <div class="form-group" [class.has-sucess]="iptAddress.valid && (iptAddress.dirty || iptAddress.touched">
                  <label class="control-label sr-only" for="inputSuccess"><i class="fa fa-check"></i> Endereço</label>
                  <input type="text" class="form-control" id="inputSuccess" placeholder="Endereço" name="address" #iptAddress="ngModel" ngModel required minlength="5" autocomplete="off">
                  <span class="help-block"></span>
                </div>
              </div>

No exemplo acima estamos levando em consideração que aplicaremos uma classe de CSS ha-sucess se o campo estiver válido de acordo com as regras que aplicamos. Com a referência ao ngModel utilizando a template variables estamos levando em consideração a seguinte validação:

iptAddress.valid: se o campo de endereço de nome address estiver válido
iptAddress.dirty ou iptAddress.touched: se o campo address não estiver no estado inicial ou se o campo já tiver sido tocado.

Content Projection

Content Projection é quando você transforma um componente em um component container deixando que o componente parent envie as especificações do input text para o componente encapsulado. Ele é muito utilizando quando temos diversos campos com validações dentro de um formulário. Toda a estrutura destes input type texts com suas respectivas validações podem ser aplicadas de forma que possam ser reutilizados.

Esta aula continua…