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.
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>
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 :
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á'}
]
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. 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:
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 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:
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!!