ngmodel - VWJavascript/Alurapic GitHub Wiki

Apesar de funcional, a sintaxe que usamos é um tanto verbosa principalmente para quem veio do Angular 1.X, acostumando com o two-way data binding da diretiva ng-model (com hífen).

Também existe em Angular 2 a diretiva ngModel (sem hífen). Ela nada mais é que uma atalho que, por debaixo dos panos, fará exatamente o que fizemos com menos verbosidade. Há um detalhe que precisa ser esclarecido antes da nossa alteração: toda vez que você usa a diretiva ngModel dentro de um formulário, o elemento ao qual ela foi adicionada precisa definir o atributo name ou utilizar a diretiva [ngModelOptions]="{standalone: true}". Vamos optar pelo atributo name, pois ele permite o uso de recursos avançados de validação do Angular, algo que veremos em breve.

Vamos alterar nosso formulário para utilizarmos a diretiva:

<!-- alurapic/client/app/cadastro/components/cadastro.html -->

<div class="container">

    <form class="row" (submit)="cadastrar($event)">
        <div class="col-md-6">
            <div class="form-group">
                <label>Título</label>
                <input name="titulo" [(ngModel)]="foto.titulo" class="form-control"  autocomplete="off">    
            </div>
            <div class="form-group">
                <label>URL</label>
                <input name="url" [(ngModel)]="foto.url" class="form-control"  autocomplete="off">
            </div>
            <div class="form-group">
                <label>Descrição</label>
                <textarea name="descricao" [(ngModel)]="foto.descricao" class="form-control"  autocomplete="off">
                </textarea>
            </div>

            <button type="submit" class="btn btn-primary">
                Salvar
            </button>
             <a [routerLink]="['']" class="btn btn-primary">Voltar</a>
            <hr>
        </div>
    </form>
</div>

Quando recarregamos nossa página nada é exibido. Verificando o console do navegador vemos a mensagem:

Can't bind to 'ngModel' since it isn't a known property of 'input'.

O problema é que a diretiva ngModel não está disponível. Para tal, precisamos importar o módulo 'FormsModule' em AppModule:

// alurapic/client/app/app.module.ts

import 'rxjs/add/operator/map';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { ListagemComponent }   from './listagem/listagem.component';
import { CadastroComponent }   from './cadastro/cadastro.component';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { FotoModule } from './foto/foto.module';
import { PainelModule } from './painel/painel.module';
import { routing } from './app.routes';

// Importa o módulo. Não esqueça de adicioná-lo no array de imports!
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [
    BrowserModule,
    HttpModule,
    PainelModule,
    FotoModule,
    routing,
    FormsModule
  ],
  declarations: [ AppComponent, ListagemComponent, CadastroComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Perfeito! Um novo teste demonstra que nosso objeto é atualizado com os dados do formulário!. Veja que usamos a diretiva ngModel envolvida por um parênteses e colchetes, juntamente para indicar que ela pode enviar a receber dados. Agora só precisamos resolver o envio dos dados para o servidor.