Czym jest ngModel w Angular?
ngModel to dyrektywa Angulara używana w formularzach szablonowych, czyli tzw. template-driven forms. Pozwala powiązać kontrolkę formularza, np. input, z modelem danych formularza.
Przykład użycia
<form #f="ngForm" (ngSubmit)="handleSubmit(f)">
<input ngModel name="nazwa1">
</form>
W tym przykładzie formularz ma lokalną zmienną szablonową f, która reprezentuje obiekt ngForm. Po wysłaniu formularza przekazujemy go do metody:
handleSubmit(f) {
console.log(f.value.nazwa1);
}
Skąd bierze się nazwa1?
W formularzach Angulara z ngModel kluczem w obiekcie f.value jest wartość atrybutu name.
Dla kodu:
<input ngModel name="nazwa1" id="nazwa2" class="nazwa3" for="nazwa4">
wartość pola input odczytuje się przez:
f.value.nazwa1
Atrybuty id, class i for nie tworzą nazw pól w obiekcie formularza.
Najważniejsze na egzamin
W Angularze przy ngModel i ngForm zapamiętaj zasadę: wartość pola w f.value jest dostępna pod nazwą z atrybutu name.