ANGULAR 2 TIPS & TRICKS cz. I
Heja! Tips & Tricks będzie nową serią artykułów, w których będę pokazywał drobne rzeczy, porady, dobre praktyki, tricki, które będą dość krótkie, więc same w sobie nie zasługują na osobne artykuły. …
Author: Tomasz Nastały
ANGULAR 2 VALIDATION SERVICE – usprawniamy wyświetlanie errorów
Cześć po 2 tygodniowej przerwie! W poprzednich artykułach pokazałem jak wyświetlać błędy walidacji na widoku. Wykonywałem to w następujący sposób:
|
1 2 3 4 5 6 7 |
<span *ngIf="modelForm.controls['firstname'].dirty && modelForm.controls['firstname'].errors?.startsWith"> Must start with {{ modelForm.controls['firstname'].errors?.startsWith }} </span> <span *ngIf="modelForm.controls.positions.controls[i].dirty && modelForm.controls['positions'].controls[i].errors?.oneRequired"> At least one field is required </span> |
Jeśli powyższy kod nie jest dla Ciebie jasny, zalecam …
ANGULAR 2 CUSTOM VALIDATORS
W poprzednich artykułach dotyczących Model Driven Forms, pokazałem jak korzystać z wbudowanej walidacji, takiej jak Required lub MinLength. W tym artykule omówię następujące kwestie: budowa własnego walidatora dla pojedynczego FormControl / …
ANGULAR 2 MODEL DRIVEN FORMS, cz. III – dynamiczne formularze
W poprzednich artykułach operowałem na formularzach, które składy się ze stałej liczby grup (FormGroup) i kontrolek (FormControl). W tym artykule pokażę, jak dodawać / usuwać / iterować po grupach w formularzu, …
ANGULAR 2 MODEL DRIVEN FORMS, cz. II – zmiana zasad walidacji w locie
Jeśli zapoznałeś się już z podstawami Model Driven Forms, to czas na tzw. mięsko! W tym artykule zaprezentuję, jak podczas runtime’u zmieniać zasady walidacji (conditional validation). Rozpatrzymy przypadek formularza, w którym: …
ANGULAR 2 MODEL DRIVEN FORMS, cz. I – tworzymy formularz z walidacją
W ostatnim artykule poruszyłem temat budowania formularzy techniką Template Driven Forms. W tym arcie przyjrzę się drugiemu wariantowi – Model Driven Forms (znane także jako reactive forms). Na potrzeby artykułu, …
ANGULAR 2 TEMPLATE DRIVEN FORMS
W Angularze 2, podejście do formularzy to istna rewolucja. Kiedy pierwszy raz zajrzałem do dokumentacji, chwyciłem się za głowę. Mieszanka 40-stu różnych nazw, w tym interfejsy, dyrektywy, klasy. Można się …
ANGULAR 2 LIFECYCLE HOOKS – ngOnChanges & ngDoCheck
Zapewne wiesz, że komponenty mają swój cykl życia, składający się z hooków, w które możemy się wpiąć. W tym artykule skupię się na 2 hookach: ngOnChanges oraz ngDoCheck, sprawdzimy jak możemy …
ANGULAR 2 CHANGE DETECTOR – mechanizmy detekcji oraz strategia onPush
Twórcy Angulara tym razem stanęli na wysokości zadania i stworzyli przemyślany system śledzenia zmian w komponentach. Po cyklu $digest z Angulara 1.x nie został nawet ślad. W tym artykule omówię …
ANGULAR 2 FORMAT DATE PIPE
W większości aplikacji zachodzi potrzeba wyświetlania dat w różnych formatach. Największą popularnością na front-endowym rynku cieszy się biblioteka moment.js. W tym krótkim artykule, pokażę jak stworzyć Pipe, który umożliwi nam wyświetlanie …
ANGULAR 2 INJECTOR TREE – jak działają serwisy
Angular 2 proponuje nam całkowicie nowe podejście dotyczące serwisów w aplikacji. W Angularze 1.x byliśmy mocno ograniczeni, wszystkie serwisy były singletonami oraz aplikacja posiadała wyłącznie jeden injector. Nowy Angular porzuca …
ANGULAR 2 AUGURY – debugging aplikacji
Debugging i profiling stworzonej przez nas aplikacji jest bardzo istotny. Brzmi to dobrze w teorii, ale jak się za to faktycznie zabrać? Z pomocą przychodzi nam Augury – narzędzie, dzięki …
ANGULAR 2 BIDRECTIONAL SERVICE – komunikacja komponentów poprzez serwis
Najczęściej nasze komponenty komunikują się przy użyciu dekoratorów Input() oraz Output(). Niestety niesie to za sobą pewne ograniczenia. Zarówno Input oraz Output, służą do komunikacji komponentów w bezpośredniej relacji rodzic-dziecko. …
ANGULAR 2 DYNAMIC COMPONENT – tworzymy dynamiczne komponenty
Angular 2 umożliwia nam dynamiczne tworzenie komponentów. Jest to bardzo przydatna funkcjonalność, np. w przypadku tworzenia modali lub w każdym przypadku, kiedy chcemy stworzyć komponent w locie. W tym artykule …
ANGULAR 2 RESOLVER – dostarczamy dane przed aktywacją routa
W tym artykule przyjrzymy się bliżej funkcji Resolver, która może nam zwrócić Promise<any>, Observable<any> lub po prostu jakieś dane. Zapewne sporo z Was dokładnie wie czemu służy Resolve, kojarząc go z …