Entendendo a Diretiva ng-model no AngularJS

A diretiva ng-model é um dos pilares do AngularJS, servindo como a ponte que conecta os dados da aplicação (model) aos elementos de interface do usuário (view), como input, select e textarea.

Implementação Básica

Ao utilizar o ng-model, você vincula o valor de um campo de entrada diretamente a uma propriedade no escopo do seu controlador.


<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="appCadastro" ng-controller="usuarioCtrl">

    <label>Nome do Usuário:</label>
    <input ng-model="nomeUsuario">

<script>
var app = angular.module('appCadastro', []);
app.controller('usuarioCtrl', function($scope) {
    $scope.nomeUsuario = "Carlos Silva";
});
</script>

</body>
</html>

O Conceito de Two-Way Data Binding

O "Two-Way Data Binding" (vinculação de dados bidirecional) garante que qualquer alteração feita no campo de entrada atualize instantaneamente a variável no controlador, e vice-versa. Podemos visualizar isso usando expressões de interpolação.

<div ng-app="appVisualizacao" ng-controller="viewCtrl">
    <p>Digite seu cargo:</p>
    <input ng-model="cargo">
    <h2>Cargo definido: {{cargo}}</h2>
</div>

<script>
angular.module('appVisualizacao', []).controller('viewCtrl', function($scope) {
    $scope.cargo = "Desenvolvedor";
});
</script>

Validação de Entradas

O ng-model também facilita a validação de formulários em tempo real. No exemplo abaixo, validamos se o conteúdo inserido corresponde a um formato de e-mail válido.

<form ng-app="" name="formularioValidacao">
    <label>E-mail corporativo:</label>
    <input type="email" name="campoEmail" ng-model="emailInput">
    <span ng-show="formularioValidacao.campoEmail.$error.email" style="color:red">
        O endereço de e-mail informado é inválido.
    </span>
</form>

Estados da Aplicação

A diretiva fornece metadados sobre o estado dos controles, permitindo verificar se o usuário interagiu com o campo ou se os dados são válidos.

$valid: Retorna veraddeiro se o conteúdo satisfizer as regras de validação.
$dirty: Retorna verdadeiro se o valor original foi alterado pelo usuário.
$touched: Retorna verdadeiro se o campo perdeu o foco (blur).

<form ng-app="" name="statusForm" ng-init="info='contato@empresa.com'">
    <input type="email" name="inputStatus" ng-model="info" required>
    <ul>
        <li>Válido: {{statusForm.inputStatus.$valid}}</li>
        <li>Modificado: {{statusForm.inputStatus.$dirty}}</li>
        <li>Visitado: {{statusForm.inputStatus.$touched}}</li>
    </ul>
</form>

Estilização Automática com Classes CSS

O AngularJS adiciona e remove classes CSS automaticamente nos elementos baesando-se no estado do ng-model. Isso permite estilizar campos inválidos de forma simples.

<style>
input.ng-invalid {
    border: 2px solid orange;
    background-color: #fff0f0;
}
input.ng-valid {
    border: 2px solid green;
}
</style>

<form ng-app="" name="cssForm">
    <p>Insira um valor obrigatório:</p>
    <input name="campoObrigatorio" ng-model="texto" required>
</form>

Tags: AngularJS javascript Data Binding Web Development front-end

Publicado em 8-16 00:26

Doido Dev