[(ngModel)] — jak działa wiązanie dwukierunkowe

Czego się dziś nauczysz

Przygotowanie: lekcje 06, 08 i 09–11 — znasz [ ], ( ), #pole, sygnały i computed. Przewidywany czas: 2 × 45 min z zadaniami.

Dwa kierunki naraz

Pomyśl o formularzu zapisu. Użytkownik wpisuje imię — klasa musi je poznać. Użytkownik klika „Wyczyść” — pole musi zrobić się puste. Ładujesz zapisane dane — pola muszą się wypełnić. Dane płyną więc w dwie strony: z pola do klasy i z klasy do pola.

Wiązanie dwukierunkowe to po prostu oba kierunki naraz: wiązanie właściwości [ ] (klasa → pole) i zdarzenie ( ) (pole → klasa) zapisane jednym znakiem.

Co jest pod spodem: dyrektywa ngModel

1. ngModel to dyrektywa z FormsModule

Zwykły <input> nie ma właściwości ngModel. Dodaje mu ją dyrektywa — kawałek kodu Angulara, który „przykleja się” do elementu i daje mu nowe możliwości. Dyrektywa NgModel mieszka w pakiecie @angular/forms, w zestawie FormsModule. Dlatego każdy komponent z ngModel ma w imports wpis FormsModule — bez niego Angular nie rozpozna zapisu i zgłosi błąd NG8002.

2. Dyrektywa ma wejście i wyjście

NgModel ma wejście ngModel (wartość, którą ma pokazać pole) i wyjście ngModelChange (zdarzenie z nową wartością po każdej zmianie w polu). Z tymi dwiema częściami pracujesz tak samo jak z [title] i (click):

<input [(ngModel)]="imie">

<input [ngModel]="imie()" (ngModelChange)="imie.set($event)">

3. „Banan w pudełku” i sygnał bez nawiasów

Zapis [( )] łatwo pomylić z ([ ]). Zapamiętaj obrazek: banan () leży w pudełku []. W skrócie piszesz samą nazwę sygnału, bez (), bo Angular potrzebuje całego sygnału — będzie go i czytał (imie()), i zmieniał (imie.set(…)). Gdybyś napisał imie(), dostałby tylko tekst, do którego nie da się nic zapisać. Wszędzie indziej odczytujesz sygnał jak zwykle: {{ imie() }}.

4. name, id i etykieta

Każdemu polu z ngModel nadawaj atrybut name. Poza znacznikiem <form> nie jest wymagany, ale wewnątrz formularza (lekcja 24) bez niego Angular zgłosi błąd. Etykieta <label for="imie"> i pole id="imie" z tą samą wartością sprawiają, że kliknięcie w napis ustawia kursor w polu, a czytnik ekranu wie, czego pole dotyczy.

Pole → sygnał: podgląd na żywo

Najprostsze połączenie: jedno pole, jeden sygnał, jeden napis pod spodem.

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly imie = signal('');
}

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="imie">Twoje imię</label>
  <input id="imie" name="imie" class="form-control" [(ngModel)]="imie">
  <p class="mt-3 fs-5">Cześć, {{ imie() }}!</p>
</div>

Twoje imię
[Ola                ]
Cześć, Ola!

Napis nadąża za każdą literą. Klasa nie ma ani jednej metody: wartość z pola trafia do sygnału sama, przez ngModelChange ukryte w skrócie.

Sygnał → pole: kod zmienia zawartość pola

Teraz kierunek, którego #pole i (input) nie dają za darmo: przyciski ustawiają sygnał, a pole samo pokazuje nową wartość.

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly nick = signal('');

    przyklad(): void {
        this.nick.set('Pixel2026');
    }

    wyczysc(): void {
        this.nick.set('');
    }
}

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="nick">Nick w turnieju</label>
  <input id="nick" name="nick" class="form-control mb-2" [(ngModel)]="nick">
  <button class="btn btn-outline-primary me-2" (click)="przyklad()">Wpisz przykładowy</button>
  <button class="btn btn-outline-danger" (click)="wyczysc()">Wyczyść</button>
  <p class="mt-3">W sygnale jest: „{{ nick() }}”</p>
</div>

[Pixel2026          ]
W sygnale jest: „Pixel2026”

„Wyczyść” opróżnia pole, choć metoda zmienia tylko sygnał. Dopisz coś ręcznie po przykładowym nicku — sygnał od razu ma nową wartość. W klasie nie ma ani słowa o polu tekstowym.

Skrót i wersja rozpisana obok siebie

Dwa pola połączone z dwoma sygnałami: pierwsze skrótem, drugie wersją rozpisaną z teorii. Sprawdź, że zachowują się identycznie — także po kliknięciu „Wyczyść oba”.

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly a = signal('');
    readonly b = signal('');

    wyczysc(): void {
        this.a.set('');
        this.b.set('');
    }
}

<div class="p-3" style="width: 28rem">
  <label class="form-label" for="a">Skrót: [(ngModel)]</label>
  <input id="a" name="a" class="form-control mb-1" [(ngModel)]="a">
  <p class="small">a() = „{{ a() }}”</p>

  <label class="form-label" for="b">Rozpisane: [ngModel] + (ngModelChange)</label>
  <input id="b" name="b" class="form-control mb-1" [ngModel]="b()" (ngModelChange)="b.set($event)">
  <p class="small">b() = „{{ b() }}”</p>

  <button class="btn btn-outline-secondary" (click)="wyczysc()">Wyczyść oba</button>
</div>

a() = „abc”
b() = „abc”

Nie ma żadnej różnicy w działaniu. W wersji rozpisanej przy [ngModel] są nawiasy (odczyt sygnału), a w (ngModelChange) jest set z $event — czyli dokładnie to, co Angular dopisuje za Ciebie w skrócie. W lekcji 25 wykorzystasz wersję rozpisaną, żeby między odczytem a zapisem wstawić własny kod.

Jeden sygnał, dwa pola i computed

Dwa pola połączone z tym samym sygnałem. Pisanie w jednym zmienia sygnał, a sygnał — drugie pole. Z sygnału liczą się dwa computed.

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly nick = signal('');
    readonly dlugosc = computed(() => this.nick().trim().length);
    readonly email = computed(() => this.nick().trim().toLowerCase() + '@klub.zsmi.pl');
}

<div class="p-3" style="width: 28rem">
  <label class="form-label" for="nick1">Nick — pole 1</label>
  <input id="nick1" name="nick1" class="form-control mb-2" [(ngModel)]="nick">

  <label class="form-label" for="nick2">Nick — pole 2 (ten sam sygnał)</label>
  <input id="nick2" name="nick2" class="form-control" [(ngModel)]="nick">

  <p class="mt-3 mb-1">Znaków: {{ dlugosc() }}</p>
  <p>Adres w klubie: {{ email() }}</p>
</div>

Nick — pole 1   [Pixel   ]
Nick — pole 2   [Pixel   ]
Znaków: 5
Adres w klubie: pixel@klub.zsmi.pl

To najlepszy dowód, że dane naprawdę płyną w obie strony: pole 1 → sygnał → pole 2. Pola mają różne name i id, bo to dwa różne elementy strony — wspólny jest tylko sygnał.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• Wiązanie dwukierunkowe to wiązanie właściwości [ ] i zdarzenie ( ) naraz: pole i dane mają zawsze tę samą wartość.
• ngModel to dyrektywa z FormsModule — bez importu dostaniesz NG8002.
• [(ngModel)]="s" to skrót od [ngModel]="s()" i (ngModelChange)="s.set($event)".
• W skrócie podajesz sam sygnał, bez nawiasów; odczyt w innych miejscach — jak zwykle, z nawiasami.
• W (ngModelChange) $event to gotowa nowa wartość, nie obiekt zdarzenia.
• Zmiana sygnału w kodzie od razu zmienia zawartość pola; jeden sygnał może obsługiwać kilka pól.
• Każde pole dostaje name, a etykieta for wskazuje id pola.

Sprawdź się: czym różni się odczyt pola przez #pole od połączenia przez [(ngModel)]? Podaj sytuację, w której zmienna szablonowa nie wystarczy.

Dokumentacja: angular.dev — wiązanie dwukierunkowe.