Wiązanie dwukierunkowe za pomocą ngModel
Synchronizuj dane wejściowe formularza ze stanem komponentu.
Wiązanie dwukierunkowe za pomocą ngModel to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Czym jest wiązanie dwukierunkowe?
Wiązanie dwukierunkowe synchronizuje wartość między komponentem a widokiem: aktualizacja jednej strony aktualizuje drugą. Jego składnia to banan w pudełku [()].
Banan w pudełku
Połączona składnia [(...)] jest skrótem dla wiązania właściwości i wiązania zdarzeń. Nawiasy kwadratowe to pudełko, a nawiasy okrągłe to banan.
<!-- shorthand -->
<input [(ngModel)]="name">
<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">Wprowadzenie do ngModel
ngModel to dyrektywa służąca do wiązania dwukierunkowego kontrolek formularza, takich jak inputy, selecty i textarea.
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>Importowanie FormsModule
Aby używać ngModel, należy zaimportować FormsModule w komponencie standalone lub NgModule.
import { FormsModule } from "@angular/forms";
@Component({
selector: "app-demo",
standalone: true,
imports: [FormsModule],
template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
name = "";
}Wiązanie pola tekstowego
Podczas pisania przez użytkownika powiązana właściwość jest natychmiast aktualizowana, a zmiana właściwości w kodzie aktualizuje pole.
<input [(ngModel)]="email">
<p>Current: {{ email }}</p>Wiązanie pola wyboru
ngModel działa z polami wyboru, wiążąc je z wartością logiczną.
<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>
// component
agreed = false;Wiązanie listy wyboru
W przypadku elementu select ngModel wiąże się z wartością wybranej opcji.
<select [(ngModel)]="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>ngModel wewnątrz formularzy
W formularzu sterowanym przez template dodaj atrybut name, aby Angular zarejestrował kontrolkę w formularzu.
<form #f="ngForm">
<input name="city" [(ngModel)]="city">
</form>Niezależny ngModel
Poza formularzem ngModel działa samodzielnie, jeśli zaimportowano FormsModule; atrybut name nie jest wymagany.
<input [(ngModel)]="search">Kiedy używać ngModel
ngModel sprawdza się w prostych formularzach sterowanych przez template. W przypadku złożonej walidacji i dynamicznych formularzy często preferowane są formularze reaktywne.
Reagowanie na zmiany
Jeśli potrzebujesz tylko reagować na zmiany, powiąż bezpośrednio zdarzenie (ngModelChange), zamiast używać pełnego wiązania dwukierunkowego.
<input [ngModel]="q" (ngModelChange)="onSearch($event)">Szybkie sprawdzenie
Sprawdź swoją wiedzę o wiązaniu dwukierunkowym ngModel.
Podsumowanie
Wiązanie dwukierunkowe korzysta ze składni banana w pudełku [(ngModel)], która łączy wiązanie właściwości i zdarzeń. Zaimportuj FormsModule, aby używać go z inputami, polami wyboru i listami wyboru.
Często zadawane pytania
Czy lekcja „Wiązanie dwukierunkowe za pomocą ngModel” jest bezpłatna?
Tak — pełny tekst „Wiązanie dwukierunkowe za pomocą ngModel” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wiązanie dwukierunkowe za pomocą ngModel”?
Synchronizuj dane wejściowe formularza ze stanem komponentu. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Wiązanie dwukierunkowe za pomocą ngModel”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Powtórzenie wiązania właściwości i zdarzeń
- Wiązanie dwukierunkowe za pomocą ngModel
- Dane wejściowe sygnału model()
- Niestandardowe właściwości obsługujące wiązanie dwukierunkowe