Moderné webové technológie 7 - Angular - Reaktívne formuláre, vlastné validátory

Zhrnutie prednášky

Prednáška sa venuje reaktívnym formulárom v Angulari ako alternatíve k template-driven formulárom. Vysvetľuje sa potreba importovať ReactiveFormsModule do aplikačného modulu a rozdiel spočívajúci v tom, že model formulára je vytiahnutý z šablóny priamo do triedy komponentu, čím sa stráca obojsmerné mapovanie hodnôt, ale získava sa priamy prístup k modelu a validátorom. Predstavujú sa tri základné triedy — FormControl pre jednotlivé prvky, FormGroup pre statické skupiny prvkov a FormArray pre dynamicky pridávané prvky indexované poradím — všetky odvodené od AbstractControl. Ukazuje sa aj alternatívny spôsob tvorby modelu pomocou FormBuilder, ktorý skracuje zápis oproti ručnému vytváraniu inštancií new FormGroup a new FormControl. Na príklade s aliasmi sa demonštruje použitie FormArray v šablóne cez ngFor s indexom a pridávanie nových prvkov metódou push, vrátane použitia gettera na sprístupnenie vnorenej FormArray.

• - Reaktívne formuláre vyžadujú import ReactiveFormsModule v app.module.ts popri FormsModule.
• - Model formulára je v triede komponentu, nie je skrytý ako pri template-driven formulároch.
• - Chýba obojsmerné mapovanie – hodnoty treba nastavovať cez setValue/patchValue a čítať aktívne alebo cez observable.
• - FormControl reprezentuje jeden formulárový prvok, FormGroup statickú skupinu prvkov, FormArray dynamické pole prvkov indexované poradím.
• - V šablóne sa jednotlivé prvky prepájajú cez formControlName v rámci formGroup priradenej pomocou formGroup direktívy.
• - FormBuilder umožňuje kratší zápis pri vytváraní FormGroup/FormControl namiesto ručného new.
• - FormArray sa v šablóne iteruje cez ngFor s indexom, nové prvky sa pridávajú metódou push a sprístupňujú getterom.

Zhrnutie pripravené s pomocou AI z prepisu videa.