Angular Forms, pobieranie danych od użytkownika, two way binding

Druga rzecz, którą chciałem się dziś zająć to rozbudowa podstrony umożliwiającej pobranie informacji od użytkownika. Przypomnę, że temat przewodni tej serii to aplikacja do zamawiania usług transportowych. Dlatego też niezbędne będzie pozyskiwanie informacji o tym skąd i dokąd potencjalny użytkownik chciałby taką usługę zamówić.

Zaczynam na sucho, dodając dwa pola typu text do szablonu komponentu get-quotes i używam klasy c-field pochodzącej z framework’a BlazeCSS. W moim przypadku musiałem w głównym pliku stylesheet.scss załączyć odpowiednie pliki źródłowe (components.inputs.scss).

Resztą stylów zajmę się później, ponieważ dzisiejszym celem jest tylko przechowanie pobranej informacji. W klasie komponentu dodaję dwa pola (skąd i dokąd) a następnie używam Angularowego atrybutu ngModel.

Dlaczego dwa typy nawiasów? Twórcy biblioteki Angular2 chcieli w ten sposób dać możliwość pełnej kontroli. Oba nawiasy oznaczają „two-way binding”, czyli powiązanie dwustronne. Oznacza to w praktyce, że zarówno zmiana wartości powiązanej zmiennej z poziomu kodu zostanie odzwierciedlona w tym polu, a także zmiana wartości przez użytkownika z poziomu przeglądarki spowoduje aktualizację przywiązanej do pola zmiennej. Używając jednego z tych nawiasów zapewniamy wiązanie w jedną stronę.

To by było na tyle, ale żeby to działało potrzeba jeszcze dociągnąć paczkę @angular/forms. Ważne by pilnować wersji biblioteki, ponieważ ja na ten moment korzystam z wersji 2.4.9, a kilka dni temu został wypuszczony Angular4 (to długa historia na inny wieczór). W praktyce spowoduje to dociągniecie paczki Forms w najnowszej, czyli czwartej wersji i mój projekt nie skompiluje się.

To tyle na dobry początek tej podstrony. Na powyższym obrazki widać efekt wiązania dwustronnego, dzięki tymczasowemu wyświetleniu na ekranie używanych zmiennych.