Olá, pessoal!

No artigo 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

Usando checkbox

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

Opção 01

<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 02

<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 01 quando checked, o valor do bind para o nosso objeto será um boolean. Já na opção 02 queremos gravar uma string.

Criando um radio input

Para criar um radio, é bem simples também, nada de especial e 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>

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

Criando um Simples SelectOne

Vamos ver como fazer um selectone com o 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:

Agora, e se queremos que não seja uma string e objetos ou melhor uma lista? Então 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á'}
]

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

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

Mostrando validações de erros no form

Vamos dizer que queremos validar um campo quando o usuário digitar. Podemos fazer isso facilmente, mas antes é 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:

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

E quando for válido:

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

O primeiro passo é criar o formulário 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>

Depois é só criar o formulário 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:

Exemplo live: http://plnkr.co/edit/fW44yi

E por hoje é isso! Eu espero que tenham gostado das dicas do artigo.

Vou ficando por aqui…