Angular: Formularze w Material Design

Angular 6, 7, 8+

0:01Jedną z bardziej charakterystycznych cech material design jest

0:06formularz formularze w material design są zbudowane w bardzo ciekawy

0:10sposób że etykieta znajduje się w środku jeśli pole jest puste natomiast

0:14jeśli chce pisać no ten place holder etykieta w środku animuje

0:19się tutaj do góry na krawędź oczywiście nie

0:23jest to wymagane jest to jeden z opcjonalnych styli mamy

0:28też taki styl wypełniony gdzie etykieta trochę inaczej się zachowuje możemy

0:32też w różny sposób na przykład te elementy dekorować na to wszystko pozwala

0:37nam material design możemy dać dodatkowy tutaj tekst możemy

0:41umieścić także komunikat błędu który zmienia także wygląd takiego

0:46elementu tak mam tutaj właśnie różne style i

0:50różne style w różnych sytuacjach możemy zastosować jak mamy jednolite białe

0:54tło no to możemy wykorzystać te bez wypełnienia jakbym chciał na przykład umieścić

0:59na jakimś kolorowym tle w ten sposób no to właśnie ten

1:03taki wariant z tłem może nam się bardziej przydać nie jest polecane

1:07mieszanie ich i teraz jeśli chodzi o angular material to

1:12mamy tu odpowiednie komponenty przejdę tutaj odpowiednie zakładki components form controls

1:16i w tej lekcji zaczniemy od takich najbardziej podstawowych elementów czyli

1:20zaczniemy na przykład od pola input które tutaj jak widzisz też zachowuje się

1:25w ten sam sposób mamy też animacje i mamy te wszystkie

1:29opcje żeby no właśnie wyglądało to jak takie

1:33pole z material design bo mam przygotowane component forms example

1:37works przejdę sobie teraz do edytora

1:41i spróbujemy dodać tutaj po prostu input jeśli dodam

1:45zwykły prosty input będzie on wyglądał w ten sposób żadnych

1:49specjalnych styli żeby to zaczynało

1:53się zachować zachowywać się jak pole z materiala musimy dać tutaj mat input

1:58specjalną dyrektywę i oczywiście żeby ona zadziałała to musimy do

2:02naszego modułu dodać odpowiednie tutaj importy z

2:06material design czyli będzie to mat input

2:11module a także będzie nam potrzebny mat

2:16form form field module to

2:21dlatego że w input reprezentuje oczywiście pole tekstowe ale

2:25żeby mieć ten efekt właśnie animacji i etykiety potrzebujemy

2:29dwóch komponentów potrzebujemy komponent który umieścimy w środku może

2:34być na przykład input może być to checkbox może być to dropdown natomiast ten efekt

2:38animacji etykiety do tego użyjemy właśnie tutaj coś

2:42takiego jak form field czyli input żebym miał tą animację

2:47powinien zawierać się w elemencie mat form field i teraz mat form field

2:52może zawierać właśnie tekstowy element text area może listę

2:56rozwijaną i inne elementy które sobie też tutaj omówimy

3:00czyli tak mam dodane moduły i teraz

3:04tak mat input to za mało musimy jeszcze dodać tutaj mat form field

3:09dodam mat form field i w środku umieszczamy kontrolkę

3:14czyli jak widzisz kontrolka składa się z kilku komponentów dlatego że to tworzy

3:18grupę czyli grupuje wszystkie te elementy które widzieliśmy sobie

3:22tutaj w dokumentacji tak może być to tekst

3:26etykieta ikona natomiast w środku umieszczamy

3:30dowolny element formularza którego chcemy użyć jeśli zapiszę to w

3:34tym wariancie to powinniśmy zobaczyć pole

3:40które widzisz zupełnie inaczej wygląda i mamy tutaj już animacje rozwijanej

3:44belki jeśli chce etykietę możesz na dwa sposoby

3:48placeholder po prostu w

3:56ten sposób i to się animuje możemy też użyć specjalnego

4:01tagu tutaj label czyli jak zobaczymy sobie tutaj możemy użyć

4:06tutaj placeholderów możemy

4:10zmienić na dowolny z tych styli tutaj dostępnych możemy

4:14użyć także tutaj specjalnego mat label czyli elementu

4:19który tutaj będzie reprezentował tą kontrolkę jest to szczególnie istotne

4:23jeśli mam jakieś specjalny typ elementu na przykład nie jest to input tylko jakiś

4:27custom'owy nasz jakiś specjalny element no to żeby ta etykieta się

4:31pojawiła żeby się animowała no to umieszczamy tutaj mat label jak

4:35widzisz przy inpucie nie jest to konieczne placeholder po prostu jest stąd pobrany

4:40i tutaj ten mat form field dodaje nam właśnie

4:44taki element mat label za nas i

4:48teraz tak mamy kilka wariantów ten float label oczywiście może

4:53być animowany ale możemy go na przykład zablokować u góry możemy

4:57go także zablokować na dole żeby zachował się jak zwykły placeholder i

5:02aby zmienić wygląd mamy tutaj specjalny

5:06argument appearance czyli zmieniając na przykład

5:10tutaj appearance czyli po prostu wygląd dostaniemy

5:16komponent który będzie wyglądał troszeczkę inaczej mat form

5:20field appearance legacy albo appearance na przykład field

5:24który robi nam wypełniony element taki

5:30z tłem możemy

5:34no właśnie appearance legacy field wymagają osobnej

5:39etykiety jeśli chodzi o nie tutaj któryś

5:43z tych wyglądów tylko jeśli chodzi o tą

5:47animację no to opcja do tego służy tutaj float

5:52label i float label może mieć właśnie zawartości auto always

5:57i never auto automatycznie always jest przypięta u góry never

6:01nigdy czyli ja tu tego nie będę zmieniał zostajemy przy tych domyślnych wartościach

6:06chciałem tobie tylko pokazać że można to sobie dostosować do

6:11własnych potrzeb jak chciałem pokazać takie bardziej rozbudowane pole pole które będzie zawierało na

6:15przykład tutaj potrzebne informacje czyli możemy użyć takiego pola

6:19które nazywa się mat hint i mat hint występuje w dwóch wariantach

6:23możemy umieścić mat hint czyli podpowiedź na końcu

6:27czyli na przykład mogę taki input ja tutaj go sobie przypiszę do

6:31zmiennej input rev powiedzmy go nazwę sprawdzić

6:36jaka tam długość jest i powiemy mu na

6:40przykład może mieć dziesięć znaków i będzie to wyglądało

6:44w ten sposób tu nam się pojawi taki właśnie hint etykietka i

6:49w trakcie pisania oczywiście będziemy się to trochę przerenderowywało tutaj

6:54mogę dodać dwa takie elementy jeden na końcu tutaj aligment

6:58jeden na początku czyli jak na przykład informacje tutaj max

7:03na przykład w ten sposób max

7:09characters 10 czyli

7:14możemy umieścić informację tu z przodu drugą z tyłu tutaj

7:19jeśli pojawi się błąd do błędu przejdziemy w kolejnych lekcjach do obsługi błędów

7:23do walidacji no to te etykietki nam znikną w ich miejsce pojawi się

7:27błąd okej dodatkowo

7:31jeszcze możemy umieszczać takie różne elementy tak jak tu widzieliście widziałeś

7:35taką ikonkę lub przycisk i helper i

7:40teraz takie elementy tutaj możemy dawać przy użyciu mat suffix

7:44i mat prefix czyli ja tutaj sobie pożyczę jakieś dwa takie elementy

7:48prefix suffix i

7:53zobaczmy możemy prefix czyli z tej strony umieścić

7:57element możemy suffix z tej strony na przykład gdyby to był number

8:01gydbyśmy mieli tutaj liczbę tutaj dodać walutę i

8:06dwa zera tym prefixem lub suffixem nie musi być tekst

8:10może być na przykład to przycisk albo ikona czyli może być na przykład mat icon

8:16albo po prostu button mat button

8:20tak dodać sobie tutaj jakiś przycisk okej i

8:25to też może być prefix suffix formularza i

8:31oczywiście żeby to był mat button muszę

8:35dodać mat button module

8:39i jeśli chcemy z ikonek korzystać mat icon module jeśli

8:43tu chciałbym użyć ikony zobaczmy przycisk wygląda w ten sposób

8:48czyli on tu się dopasowuje do formularza staje się częścią formularza i też

8:52jeśli ja go klikam to też to aktywuje formularz czyli

8:56te wszystkie elementy które tutaj widzimy w specyfikacji container ikona

9:00tekst tutaj podpis jak najbardziej to wszystko jest

9:04obsługiwane przez angular material

9:10i w kolejnych lekcjach zajmiemy się innymi polami formularza tak innymi

9:14typami pól bo tu nie tylko może być to input to może być checkbox radio select

9:20może być tutaj date picker slidery i

9:25obsługa błędów no ale to wszystko już w kolejnych lekcjach tak więc do zobaczenia