Binding bidirezionale con ngModel
Sincronizzi gli input dei moduli con lo stato del componente.
Binding bidirezionale con ngModel è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Che cos'è il two-way binding
Il two-way binding mantiene sincronizzato un valore tra il componente e la view: l'aggiornamento di uno aggiorna anche l'altra. La sintassi è la banana-in-a-box [()].
La banana nella scatola
La sintassi combinata [(...)] è una forma abbreviata di un property binding più un event binding. Le parentesi quadre sono la scatola, le parentesi tonde la banana.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">Introduzione a ngModel
ngModel è una direttiva per il two-way binding sui controlli dei moduli, come input, select e textarea.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>Importazione di FormsModule
Per usare ngModel deve importare FormsModule nel componente standalone o nell'NgModule.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Binding di un input di testo
Quando l'utente digita, la proprietà associata viene aggiornata immediatamente; se invece modifica la proprietà nel codice, viene aggiornato l'input.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Binding di una casella di controllo
ngModel funziona con le caselle di controllo, associandole a un valore booleano.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Binding di un select
Con un elemento select, ngModel viene associato al valore dell'opzione selezionata.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel nei form
All'interno di un form gestito dal template, aggiunga un attributo name affinché Angular registri il controllo nel form.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>ngModel standalone
Al di fuori di un form, ngModel funziona autonomamente purché FormsModule sia importato; non è richiesto alcun name.
<input [(ngModel)]="search">Quando usare ngModel
ngModel è ideale per i form semplici gestiti dal template. Per la validazione complessa e i form dinamici, spesso si preferiscono i form reattivi.
Reagire alle modifiche
Se deve solo reagire alle modifiche, associ direttamente l'evento (ngModelChange) invece di usare il two-way binding completo.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Verifica rapida
Verifichi la Sua comprensione del two-way binding con ngModel.
Riepilogo
Il two-way binding usa la sintassi banana-in-a-box [(ngModel)], che combina property binding ed event binding. Importi FormsModule per usarlo con input, caselle di controllo e select.
Domande Frequenti
La lezione «Binding bidirezionale con ngModel» è gratuita?
Sì — il testo completo di «Binding bidirezionale con ngModel» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Binding bidirezionale con ngModel»?
Sincronizzi gli input dei moduli con lo stato del componente. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Binding bidirezionale con ngModel»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Riepilogo del binding di proprietà ed eventi
- Binding bidirezionale con ngModel
- Input signal model()
- Proprietà personalizzate con binding bidirezionale