Category Archives: Angular

AngularJS, Forms – Step One

Overview

O que é?

A utilização de Forms é uma tarefa comum na web. Temos exemplos de cadastro, login, newsletter, etc, são tipos de forms para inserção de dados de usuários.

O AngularJS veio para facilitar a implementação de forms (cliente side) com validações e feedback aumentando a experiência de usuário.

Data-binding e Validações

Para resolver estas tarefas, o AngularJS disponibiliza de diretivas para utilização no forms, oferecendo o data-binding e validação de controles de input.

O databinding é aplicado pelos input data control via diretiva ng-model.

<input type="text" ng-model="nome">

Aqui eu defino uma input para entrada de dados e utilizo a diretiva ng-model=”nome”, agora o form possui definida uma propriedade nome.

Em resumo, a ng-model faz a vinculação da propriedade nome na webapp, além de ser acessada pelo Controller AngularJS.

Alguns componentes de inputs datas HTML

Esta imagem apresenta alguns componentes de entrada de dados, como o button, input, select e textarea.

form_customer

Exemplos de utilização

Exemplos de utilização da ng-model aplicados aos elementos HTML.

checkbox


<form>
    <input type="checkbox" ng-model="valor">
</form>

radiobutton


<form>
<input type="radio" ng-model="valor"value="cs">Cs
<input type="radio" ng-model="valor" value="xamarin">Xamarin
</form>

selectbox


<form>
<select ng-model="valor">
<option value="">
<option value="cs">Cs
<option value="xamarin">Xamarin
</select>
</form>

Continua