Angular Forms Flashcards
Jakiego rodzaju mamy podejścia do pracy z formularzami w Angularze?
Template i Reactivex
Opisz krótki formularze Reactivex?
Bardziej elastyczne, testowalne, skalowalne + do użytku z wzorcami reaktywnymi
Jak wygląda działanie formularzy template-driven?
To znacznie prostsze formularze. W sytuacji kiedy nie są nam potrzebne zaawansowane możliwości formularzy Reactive. Nie skalują się dobrze.
Jakie są kluczowe elementy formualarzy reaktywnych?
Są explicite (setup), dane strukturyzowane, synchroniczne, walidacja przez funkcje, immutable, dostęp poprzez low-level API
Jakie są zalety template driven API?
Są less explicit, nieustrukturalizowane, asynchroniczne, walidacja przez dyrketywy, mutable, aobstrakcja nad api
Do czego służy FormControl?
Pozwala na śledzenie wartości i określenie statusu walidacji pojedynczego elemetu .
Do czego służy element FormGroup?
Śledzi wartości i status walidacji dla kolekcji elementów ?
Do czego służy FormArray?
Śledzi wartości i status walidacji dla tablicy elementów ?
Do czego służy element ControlValueAccessor?
To most pomiędzy Angularowymi instancjami FormControl i natywnymi elementami DOM
Jak stworzyć prosty formularz wykorzystując Reactivex form?
import { Component } from ‘@angular/core’;
import { FormControl } from ‘@angular/forms’;
@Component({
selector: 'app-reactive-favorite-color',
template: `
Favorite Color:
`
})
export class FavoriteColorComponent {
favoriteColorControl = new FormControl('');
}
Co jest źródłem prawdy w formularzu Reaktywnym?
Jest to FormModel. - czyli instancja FormModel.
Czy kontolka FormControl wykorzystuje ControlValueAccessor?
Tak, dyrektywa FormControl wykorzystuje accessor do synchronizacji danych
Jak wygląda setup formularza wykorzystującego template-driven form?
import { Component } from ‘@angular/core’;
@Component({
selector: 'app-template-favorite-color',
template: `
Favorite Color:
`
})
export class FavoriteColorComponent {
favoriteColor = '';
}
Co jest źródłem prawdy w template-driven form?
Jest to szablon - template. W tym wypadku to dyrektywa ngModel tworzy instancje FormControl. Jest less-explicit, ale mamy mniejszą kontrolkę nad formularzem.
W jaki sposób input jest połączony z modelem?
Aktualizacje z widoku do modelu i odwrotne są synchronizcne i niezależle od UI. Wykorzystywana jest metoda favColorControl.setValue(“blue”);
Jaki jest flow wpisania tekstu w formularz w Reaktywnym formularzu?
Użytkownik coś wpisuje. Form input emituje zdarzenie z najnowaszą wartością. ControlValueAccessor nasłuchuje na to zdarzenie na element form input i od razu przekierowuje wartośc do instnacji FormControl.
Następnie FormControl emituje nowe zdarzenie z nową wartością poprzez valueChanges - observable.
Innu subskrybencji na zdarzenie valueChanges również dostają nową wartość.
W jaki sposób zaktualizować programistycznie wartość w formularzu?
Wykorzystuje instancje FormControl. favColorControl.setValue(‘nowaWartosc’); FormControl emituje nowe zdarzenie i wartość poprzez valueChanges - observable. Wszyscy subskrybencji otrzymuję powiadomienie i nową wartość. ControlValueAccessor na eleent aktualizuje kontrolkę z nową wartością.
Jak wygląda przepływ danych w przypadku formularzy template-driven?
- Uzytkowni kwybiera kolor
- input emituje zdarzenie z nową wartością
- control value accessor reaguje na zdarzenie i odpala setValue() na instancji FormControl
- FormControl emituje zdarzenie poprzez valueChanges (observable)
- Wszyscy subkrybencji otrzymują nową wartość
- ControlValueAccessor uruchamia NgModel.viewTomodelUpdate() co emituje zdarzenie ngModelChange
- Ponieważ mamy wiązanie dwu-stronne to wartość favoriteColor jest aktualizowana.
