Série AngularJS: Advanced Form

olá Pessoal,

No post de hoje vamos ver como brincar um pouco mais com AngularJS e formulário. Com AngularJS tudo é mais simples e tudo que já faziamos pré mundo AngularJS funciona com muita naturalidade. Os exemplos mostrados aqui estão no meu Github no repositório do workspaceAngularJS o arquivo com o exemplo é o advancedform.html

lets go…

Usando checkbox

Está precisando um checkbox para o seu formulário? É bem simples. Veja o código a seguir:

Opção 1

<div>
<label>Role</label>
<!-- the value for user.admin is set to true if checkbox is checked -->
<input type="checkbox" ng-model="user.admin">
{{user.admin}}
</div>

 

Opção 2

<div>
<label>User Role</label>
<!-- the value is admin for object user.role when the checkbox is checked"-->
<input type="checkbox" ng-model="user.role" ng-true-value="admin" ng-false-value="user">
{{user.role}}
</div>

 

Na opção 1 quando checked o valor do bind para o nosso objeto será um boolean. Já na opção dois queremos gravar uma string.

advancedformcheckbox
Criando um radio input

Para criar um radio, é bem simples também, nada de especial o próprio explica tudo:

<label>
<input type="radio" ng-model="user.sex" value="M"> Masculino
</label>
<label>
<input type="radio" ng-model="user.sex" value="F">Feminino
</label>

 

advancedformradio

Quando clicado o valor que passamos para o objeto é M ou F.

Criando um Simples SelectOne

Vamos ver como fazer um selectone com String:

<!-- Select input with String -->
<label>Sexo:
<select ng-model="sex">
<option value="M" ng-selected="sex=='M'">Masculino</option>
<option value="F" ng-selected="sex=='F'">Feminino</option>
</select>
Escolhida foi:{{sex}}
</label>

 

Observe que estamos passando string para o value o ng-selected sendo tratado como String. O resultado é conforme a seguir :

advancedformselect
Agora se queremos que não seja uma string e objetos ou melhor uma lista ? Dai temos que usar o ng-options ao invés do ng-selected, vamos ver:

<!-- select input with object -->
<label>Country
<select ng-model="countrySelected" ng-options="country.name for country in countries">
</select>
{{countrySelected}}
</label>

 

O ng-options é bem simples, informamos qual atributo queremos exibir de cada item do array. No controller criei um array assim:

$scope.countries = [
{name:'Brazil'},
{name:'Australia'},
{name:'Canadá'}
]

 

advancedformngoptions

 

advancedformngoptionselected

Observe que o select fica vazio quando carregado, vamos colocar uma mensagem, então dentro de <select /> coloque:

<option value="">--No Selection--</option>

 

advancedformnoselect

Mostrando validações de erros no form

Vamos dizer que queremos validar um campo, quando o usuário digitar. Podemos fazer isso facilmente. Antes disso é preciso entender apenas um conceito importante que temos no Angular que é o ngModelController.

O ngModelControler é responsável por gerenciar o data binding entre o valor passado com o model (ng-model). E assim ele faz o track com a view se é valido ou não, e se o input tem sido modificado. No exemplo a seguir vamos validar um campo e-mail, veja o código:

<form name="userInfoForm">
<!-- call my function and field will be validated-->
<div class="control-group" ng-class="getCssClasses(userInfoForm.email)">
<label>E-mail</label>
<!-- we must inform name for field -->
<input type="email" ng-model="user.email" name="email" required>
<!-- will be show only if the format is invalid-->
<span ng-show="showError(userInfoForm.email, 'email')">
E-mail format is inválid. 
</span>
<span ng-show="showError(userInfoForm.email,'required')">
E-mail is required
</span>
</div>
</form>

 

Observe que no ng-show passamos o campo e o tipo de validação. Agora no controller vamos criar a função que faz o tratamento :

//check if field passed is valid or invalid 
$scope.getCssClasses = function(ngModelController){
return{
error:ngModelController.$invalid && ngModelController.$dirty,
success:ngModelController.$valid && ngModelController.$dirty
};
};
$scope.showError = function(ngModelController,error){
return ngModelController.$error[error];
};

O resultado será conforme a seguir:

advancedformshowvalidationemail

Informando que o campo é requerido. Agora vamos ver quando o formato do e-mail for inválido:

 

advancedformshowvalidationformat

E quando for válido:

advancedformshowvalidationvalid

E para finalizar vamos aprender a reusuar componentes de formulário em outro, ou seja, composite. É bem simples.

Primeiro Passo é criar o formulario que será reutilizado usando ng-template assim:

 

<!--creating composite reusable components-->
<script type="text/ng-template" id="password-form">
<label>Password</label>
<input ng-model="user.password" type="password" required>
</script>

 

Passo 2

É criar o formulario normal e adicionar o composite:

<!--using composite -->
<form name="form1" novalidate>
<legend>User</legend>
<label>username</label>
<input ng-model="user.username" required>
<ng-include src="'password-form'"></ng-include>
</form>

 

Observe que apenas damos um nome para o nosso composite e no ng-include, chamamos ele.
O resultado:

advancedformnginclude

Exemplo Live

http://plnkr.co/edit/fW44yi
E por hoje é isso, eu espero que tenham gostado das dicas do post.
Vou ficando por aqui.

See ya!!