Formularze reaktywne w Angularze

W tej lekcji poznają Państwo formularze reaktywne, które obsługują złożone scenariusze formularzy w aplikacjach Angular.

Czym są formularze reaktywne?

Formularze reaktywne korzystają z programistycznego podejścia do tworzenia i zarządzania formularzami, zapewniając większą elastyczność oraz możliwości walidacji.

Importowanie ReactiveFormsModule

Aby używać formularzy reaktywnych, zaimportuj ReactiveFormsModule do modułu:

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

Tworzenie FormGroup

Zdefiniuj grupę formularza w klasie komponentu:

this.myForm = new FormGroup({
  name: new FormControl('')
});

Wiązanie formularza z szablonem

Użyj dyrektywy formGroup w szablonie, aby połączyć grupę formularza:

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

Walidacja formularza

Do formularzy reaktywnych można łatwo dodawać walidatory, aby zapewnić poprawność danych wejściowych:

name: new FormControl('', Validators.required)

Obsługa wysyłania formularza

Obsługuj wysyłanie formularzy, subskrybując zdarzenia wysłania w klasie komponentu:

onSubmit() {
  console.log(this.myForm.value);
}

Używanie FormBuilder

Usługa FormBuilder upraszcza tworzenie formularzy:

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

Podsumowanie

Wiedzą już Państwo, jak tworzyć formularze reaktywne, obsługiwać walidację i skutecznie zarządzać stanem formularza. Dobra robota!