Angular Forms

Question 1

Jakiego rodzaju mamy podejścia do pracy z formularzami w Angularze?

Answer 1

Template i Reactivex

Question 2

Opisz krótki formularze Reactivex?

Answer 2

Bardziej elastyczne, testowalne, skalowalne + do użytku z wzorcami reaktywnymi

Question 3

Jak wygląda działanie formularzy template-driven?

Answer 3

To znacznie prostsze formularze. W sytuacji kiedy nie są nam potrzebne zaawansowane możliwości formularzy Reactive. Nie skalują się dobrze.

Question 4

Jakie są kluczowe elementy formualarzy reaktywnych?

Answer 4

Są explicite (setup), dane strukturyzowane, synchroniczne, walidacja przez funkcje, immutable, dostęp poprzez low-level API

Question 5

Jakie są zalety template driven API?

Answer 5

Są less explicit, nieustrukturalizowane, asynchroniczne, walidacja przez dyrketywy, mutable, aobstrakcja nad api

Question 6

Do czego służy FormControl?

Answer 6

Pozwala na śledzenie wartości i określenie statusu walidacji pojedynczego elemetu .

Question 7

Do czego służy element FormGroup?

Answer 7

Śledzi wartości i status walidacji dla kolekcji elementów ?

Question 8

Do czego służy FormArray?

Answer 8

Śledzi wartości i status walidacji dla tablicy elementów ?

Question 9

Do czego służy element ControlValueAccessor?

Answer 9

To most pomiędzy Angularowymi instancjami FormControl i natywnymi elementami DOM

Question 10

Jak stworzyć prosty formularz wykorzystując Reactivex form?

Answer 10

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('');
}

Question 11

Co jest źródłem prawdy w formularzu Reaktywnym?

Answer 11

Jest to FormModel. - czyli instancja FormModel.

Question 12

Czy kontolka FormControl wykorzystuje ControlValueAccessor?

Answer 12

Tak, dyrektywa FormControl wykorzystuje accessor do synchronizacji danych

Question 13

Jak wygląda setup formularza wykorzystującego template-driven form?

Answer 13

import { Component } from ‘@angular/core’;

@Component({
  selector: 'app-template-favorite-color',
  template: `
    Favorite Color: 
  `
})
export class FavoriteColorComponent {
  favoriteColor = '';
}

Question 14

Co jest źródłem prawdy w template-driven form?

Answer 14

Jest to szablon - template. W tym wypadku to dyrektywa ngModel tworzy instancje FormControl. Jest less-explicit, ale mamy mniejszą kontrolkę nad formularzem.

Question 15

W jaki sposób input jest połączony z modelem?

Answer 15

Aktualizacje z widoku do modelu i odwrotne są synchronizcne i niezależle od UI. Wykorzystywana jest metoda favColorControl.setValue(“blue”);

Question 16

Jaki jest flow wpisania tekstu w formularz w Reaktywnym formularzu?

Answer 16

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ść.

Question 17

W jaki sposób zaktualizować programistycznie wartość w formularzu?

Answer 17

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ą.

Question 18

Jak wygląda przepływ danych w przypadku formularzy template-driven?

Answer 18

1. Uzytkowni kwybiera kolor
2. input emituje zdarzenie z nową wartością
3. control value accessor reaguje na zdarzenie i odpala setValue() na instancji FormControl
4. FormControl emituje zdarzenie poprzez valueChanges (observable)
5. Wszyscy subkrybencji otrzymują nową wartość
6. ControlValueAccessor uruchamia NgModel.viewTomodelUpdate() co emituje zdarzenie ngModelChange
7. Ponieważ mamy wiązanie dwu-stronne to wartość favoriteColor jest aktualizowana.