Formularze sterowane szablonem

W tej lekcji poznają Państwo formularze sterowane szablonem w Angularze, które umożliwiają szybkie tworzenie prostych formularzy.

Czym są formularze sterowane szablonem?

Formularze sterowane szablonem korzystają z szablonów HTML i dyrektyw Angulara, aby ułatwić tworzenie, walidację i wysyłanie formularzy.

Importowanie FormsModule

Aby używać formularzy sterowanych szablonem, zaimportuj FormsModule do modułu Angulara:

import { FormsModule } from '@angular/forms';

Tworzenie prostego formularza

Zdefiniuj prosty formularz w szablonie za pomocą dyrektywy ngForm:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

Dwukierunkowe wiązanie z ngModel

ngModel wiąże kontrolki formularza z właściwościami komponentu za pomocą dwukierunkowego wiązania danych:

<input [(ngModel)]="user.name" name="username">

Wysyłanie formularza

Łatwo obsługuj wysyłanie formularza za pomocą wiązania zdarzeń Angulara:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

Walidacja formularza

Angular udostępnia proste dyrektywy walidacyjne, takie jak required i minlength:

<input name="username" ngModel required minlength="4">

Dostęp do stanu formularza

Uzyskaj dostęp do stanu formularza, takiego jak poprawność lub status touched, za pomocą zmiennych szablonu:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

Podsumowanie

Poznali Państwo sposoby łatwego tworzenia, wiązania, walidowania i wysyłania formularzy sterowanych szablonem. Proszę ćwiczyć dalej!