Vinculação bidirecional com ngModel
Sincronize entradas de formulário com o estado do componente.
Vinculação bidirecional com ngModel é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
O que é vinculação bidirecional?
A vinculação bidirecional mantém um valor sincronizado entre o componente e a visualização: atualizar um atualiza o outro. A sintaxe é a banana na caixa [()].
A banana na caixa
A sintaxe combinada [(...)] é uma forma abreviada de uma vinculação de propriedade mais uma vinculação de evento. Os colchetes são a caixa; os parênteses, a banana.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">Apresentando ngModel
ngModel é uma diretiva para vinculação bidirecional em controles de formulário, como campos de entrada, listas de seleção e áreas de texto.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>Importando FormsModule
Para usar ngModel, você deve importar FormsModule no seu componente independente ou NgModule.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Vinculando um campo de texto
Enquanto o usuário digita, a propriedade vinculada é atualizada imediatamente, e alterar a propriedade no código atualiza o campo de entrada.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Vinculando uma caixa de seleção
ngModel funciona com caixas de seleção, vinculando-se a um valor booleano.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Vinculando uma lista de seleção
Com um elemento de seleção, ngModel vincula-se ao valor da opção escolhida.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel dentro de formulários
Dentro de um formulário orientado por modelo, adicione um atributo name para que o Angular registre o controle no formulário.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>ngModel independente
Fora de um formulário, ngModel funciona sozinho, desde que FormsModule seja importado; nenhum name é necessário.
<input [(ngModel)]="search">Quando usar ngModel
ngModel é ideal para formulários simples orientados por modelo. Para validações complexas e formulários dinâmicos, os formulários reativos costumam ser preferíveis.
Reagindo a alterações
Se você só precisa reagir a alterações, vincule diretamente o evento (ngModelChange) em vez de usar a vinculação bidirecional completa.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Verificação rápida
Teste sua compreensão da vinculação bidirecional com ngModel.
Recapitulação
A vinculação bidirecional usa a sintaxe banana na caixa [(ngModel)], que combina a vinculação de propriedade e de evento. Importe FormsModule para usá-la em campos de entrada, caixas de seleção e listas de seleção.
Perguntas Frequentes
A aula “Vinculação bidirecional com ngModel” é grátis?
Sim — o texto completo de “Vinculação bidirecional com ngModel” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Vinculação bidirecional com ngModel”?
Sincronize entradas de formulário com o estado do componente. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Vinculação bidirecional com ngModel”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Revisão da vinculação de propriedades e eventos
- Vinculação bidirecional com ngModel
- Entradas de sinais model()
- Propriedades personalizadas com vinculação bidirecional