Angular: Wybór i podpowiadanie - Autocomplete

Angular 6, 7, 8+

0:01Witaj w kolejnej lekcji tym razem zajmiemy się kontrolkami

0:05autopodpowiadania zacznę od tutaj prostego takiego formularza gdzie mamy jedną

0:10kontrolkę i powiedzmy że będzie to służyło do powiedzmy

0:15placeholder do dobierania osób przypisanych

0:19do zadania czyli assign'ing albo po

0:25prostu assign to czyli przypisz zadanie do konkretnej osoby

0:29tutaj powinna się pojawić assign to i chodzi o to że jak będę wpisywał tutaj

0:33jakieś imię nazwisko żeby mi potem wyświetliła

0:37się lista z podpowiedziami do tego wykorzystamy tutaj autocomplete

0:41czyli to jest specjalny moduł w angular material i

0:45jeśli chciałbym żeby taka opcja tutaj zadziałała to umieszczę ją pod spodem pod

0:50inputem no to musimy oczywiście zaimportować odpowiedni moduł czyli

0:54tutaj do naszego modułu mat autocomplete

0:59module okej

1:04to już błędy powinny w takim razie zniknąć i jak będę

1:08pisał tu w inpucie no to chcielibyśmy odpowiednio modyfikować tutaj tablice dostępnych

1:13opcji nazwę to

1:17sugestie i tak tutaj stworzymy sobie w formularzu

1:22mam już przygotowane tutaj jakąś strukturę formularza oprócz tego przygotuję jeszcze tutaj

1:26tablice sugestii no i na przykład tutaj wpiszę sobie alice

1:30bob no

1:34i ktoś tam jeszcze powiedzmy trzy osoby i

1:38teraz jeśli tylko otworzę input chciałam żeby ta lista

1:42się rozwinęła i pokazała mi tutaj w listę dostępnych opcji

1:47do wyboru czyli jeszcze raz w formularzu tutaj mamy autocomplete ten

1:51autocomplete możemy przypisać sobie do jakiejś zmiennej powiedzmy

1:55nazwę to trochę długa

2:02nazwa i tutaj trzeba wydobyć dokładnie tą kontrolkę ze środka nazywać się to

2:06będzie mat to complete

2:13tak i w ten sposób dostajemy się do obiektu autocomplete

2:17który jest zawarty w tym komponencie mat autocomplete i teraz trzeba zawsze

2:21te kontrolki jakoś ze sobą połączyć i w tym celu tutaj do

2:28no właśnie do tej kontrolki musimy podpiąć

2:31ten obiekt który właśnie tutaj wyciągnęliśmy i w tym celu używamy dyrektywy tak

2:36samo będzie się nazwała czyli mat autocomplete

2:42i teraz do tej dyrektywy przy pisze dokładnie tą

2:47referencje którą tutaj sobie pobrałam czyli tutaj haszem wyciągamy to

2:51i przypisujemy tu dyrektywy łączymy te

2:55dwa obiekty ze sobą no i zobaczmy jak to zadziała

3:00tutaj jeszcze mamy widzę literówkę

3:05ok i teraz jak tutaj kliknę to jak widzisz

3:09mamy te wszystkie opcje dostępne jednak chciałbym że jeśli pisze

3:13to w trakcie pisania żeby ta lista mi się filtrowała sortowała

3:17no to w takim wypadku musimy tutaj zareagować na zmianę tego inputa i zaktualizować

3:22listę sugestii żeby ta lista sugestii po prostu się renderowała aktualizowała w

3:26miarę jak pisze teraz moglibyśmy to wszystko zrobić tutaj w tym komponencie

3:30posortować sobie tą tablicę jednak w prawdziwej aplikację jak wiesz ta

3:34lista sugestii może być krótka może być też bardzo długa mogą być to też requesty

3:38na serwer z każdą literką którą w pisze dlatego żeby tutaj nie robić

3:42tego wszystkiego w komponencie stworzymy sobie usługę powiedzmy tutaj mamy usługę

3:46już stworzyłem do wyszukiwania użytkowników tak i tu

3:50zrobimy sobie na przykład find users

3:54find all query all i

3:58tu wpiszemy sobie jakieś hasło jakieś zapytanie string powiedzmy

4:03na początku find all by name na przykład

4:07znajdź po imieniu i teraz nawet żeby nie tworzyć serwera żeby

4:11móc szybko pracować interfejsem no to powiedzmy sobie zamockować dane co to jest mock

4:15mock to jakieś przykładowe dane ja tu mam plik users json takie sobie wygenerowany

4:20z przykładowymi danymi i spróbuję go zaimportować tutaj do tego serwisu

4:25żeby sobie udawał że ściąga z internetu ściąga z serwera to naprawdę prostu będzie

4:29do lokalny plik można bardzo szybko prototypować nowe ekrany nie

4:33martwiąc się no o to że backend o bazy danych

4:37i tak dalej może sobie podłożyć podstawić jakieś tymczasowe sztuczne dane

4:41i teraz żeby to zadziałało tu teraz w configu dodam taką

4:45opcję która pozwoli mi o właśnie

4:50zaimportować json jako moduł

4:54czyli będę mógł dane tutaj zaimportować bezpośrednio do naszego

4:58naszego serwisu tutaj mamy import gwiazdka

5:02jako users from i tu zobaczymy

5:06sobie data users json i teraz ten obiekt users

5:10powinien zawierać wszystkich użytkowników i teraz mogę po prostu

5:14zwrócić tutaj w tej wyszukiwarce tych użytkowników jednak my chcemy zasymulować

5:19udać że te dane są pobierane asynchronicznie z serwera chciałbym

5:23żeby ta funkcja zwracała

5:27observable czyli właśnie wartość asynchroniczną

5:32opakowaną właśnie w observable tu na chwilkę jeszcze otypuję jak ten

5:37nasz użytkownik user ma wyglądać jak spojrzymy sobie na dane

5:41to będziemy potrzbowali id name email position

5:45foto są to pola tego obiektu i tak

5:50samo tu w interfejsie sobie zrobimy żeby to było id number no

5:54a pozostałe tutaj elementy to

5:59będzie string okej

6:04czyli mamy tutaj typ tego obiektu

6:08więc chciałbym żeby ta funkcja find by all zwracała mi tablicę obiektów

6:13typu user tak tutaj to

6:18nie będzie otypowane za chwilkę sobie poradzimy teraz jak to zrobić żeby było observable najprostszym

6:22sposobem jest użycie operatora of tak operator of

6:27zaimportowany z rx js co pozwoli nam tą

6:32wartość którą mamy natychmiast zwrócić opakowaną w observable więc w

6:36przyszłości jak zmienię tą metodę że ona faktycznie robiła metodę http zapytań do serwera no

6:41to wszystkie komponenty nie muszę już ich zmieniać one będą automatycznie odbierały poprawną wartość

6:45ja tylko jeszcze jedną rzecz tych użytkowników postaram się właśnie pofiltrować

6:49posortować żeby one pasowały do tego query czyli

6:53jeśli powiedzmy user name zrobimy go do małych liter żeby duże

6:57małe litery nie miały znaczenia jeśli zawiera to nasze query także

7:02z małej litery jeśli

7:07zawiera to wtedy tylko wtedy załączamy do wyników teraz wywołując tą

7:11metodę powinienem otrzymać natychmiast asynchronicznie ale natychmiast wyniki

7:17tutaj pofiltrowane z tej naszej kolekcji użytkowników wszystkich którym name pasuje

7:21czyli find by name zobaczmy wstrzyknę tą usługę teraz do naszego

7:25komponentu forms extras tu

7:30będzie users service typu

7:35user service angular powinien oczywiście sobie po typie sam wiedzieć

7:39jak wstrzyknąć tą usługę i teraz tutaj dodam

7:43sobie taki jeśli ktoś wprowadzi zmianę w assignee input czyli

7:49this assignee input value changes czyli

7:53jeśli ktoś pisze coś zacznie pisać to byłem tu wykrywamy zmiany

7:57jeśli się zasubskrybuję i wtedy każdą zmianę każdy input użyjemy

8:03do wyszukiwania użytkowników czyli this user service find input

8:08i to nam zwróci tutaj kolejną rzecz muszę zrobić kolejnego subscribe'a no

8:13i teraz żeby nie robić subscribe i drugiego subscribe'a w nim to możemy

8:17zrobić troszkę inaczej zamiast sięsubskrybować na te wartości to tutaj

8:21możemy zrobić coś takiego że użyjemy pipe i

8:25przetransormujemy ten te operacje czyli każda zmiana tutaj

8:30value changes powinna spowodować wywołanie funkcji find by

8:34name i mógłbym zrobić tutaj mat przemapować to na każdą

8:39wartość tak czyli każdy input przemapować sobie

8:45tak w ten sposób oczywiście

8:50operator map trzeba zaimportować z rx js operators tylko

8:55problem jest taki że teraz w inpucie tutaj będę miał observable kolejny będę miał

8:59tutaj zrobię bardzo brzydką rzecz bo musiałbym zrobić w subscribe kolejnego

9:06subscribe'a i w każdej sytuacji gdzie mamy zagnieżdżone observable

9:10możemy pozbyć się tego dodatkowego poziomu gdzie w observable mamy

9:14kolejny observable tak tutaj pobieramy observable zmian i dla

9:18każdej zmiany tworzymy wewnątrz tutaj tego pipe'a kolejny observable

9:22więc żeby to rozpakować zamiast mapa mogę użyć operatora na

9:26przykład switch map który automatycznie

9:31przesubskrybuje się na najnowszy element i wtedy w inpucie mamy już tablice

9:35użytkowników więc mógłbym to wszystko przypisać do

9:39this options i

9:44to teoretycznie powinno suggestions powinno zadziałać tu

9:50jest users tu muszę powiedzieć że jest to typu user

9:58zobaczmy jak wpisze tutaj jakieś litery coś

10:03jeszcze jest nie

10:07tak czemu nam to tego nie podmienia suggestions równa

10:12się input zobaczmy tu jest debuguje czy

10:20to nam zadziała find

10:26all by name nie jest funkcją coś jest nie tak z naszym users service już

10:30zobaczymy find all by name okej

10:34jest user service find all by

10:38name wygląda dobrze jeszcze raz okej

10:46i znalazłem 32 osoby na m jak

10:51teraz puszczę to tu pojawia mi się object object object czyli

10:55działa to aczkolwiek ten nasz html źle wyświetla tych

10:59naszych użytkowników co jeszcze możemy zrobić mogę to przypisywać w ten

11:03sposób jasne robić subscribe wtedy wypadałoby żeby także unsubscribe żeby

11:08tego nie musieć tego subskrybować ręcznie to możemy całą taką operację po prostu

11:12przypisać sobie tutaj do sugestii

11:16i wtedy sugestie będą typu observable user i subskrypcję możemy

11:20zrobić zamiast w javascript'cie możemy tą subskrypcję równie dobrze wykonać od

11:25razu tutaj w htmlu czyli

11:29korzystając z async pipe tutaj w htmlu się

11:33zasubskrybujemy na ten observable który powstał w tym

11:37miejscu czyli wszystkie wyniki tutaj naszego co wpiszemy będzie przetransformowane

11:42zapytania tutaj do naszego poszukiwanego serwera który na prawdę czyta z

11:46pliku i wyniki tu pojawią się w tym observable który

11:50ten async nam rozpakuję do do tej sugestii i teraz tych

11:54opcji chciałem powiedzmy wyciągnąć powiedzmy name i

11:58zobaczmy nie ma żadnych błędów tu

12:05jest jakiś widzę błąd w user service to jeszcze tylko spojrzę sobie

12:09na to user service co tu jest nie tak ok

12:23okej i teraz tak elegancko

12:28pojawia nam się podpowiedzi teraz jeśli

12:33ja spróbuję wybrać którąś z tych osób no to kolejny

12:37problem że teraz ten obiekt trafił do tego naszego pola tutaj

12:41formularza no i co no i jest to

12:45problem bo chcemy wyświetlić tylko name albo tylko jakiś inny identyfikator jeśli

12:49chcemy żeby ten input u góry w przypadku wybrania obiektu wyświetlał tylko

12:53określony sposób formatowany ten obiekt to mamy tutaj możliwość możemy

12:57ustawić sobie może nie w tym miejscu tylko tu na auto complete

13:02możemy ustawić coś takiego jak display with

13:08format powiedzmy tak

13:14sformatuj sugestie sformatuj user

13:18czyli tworzymy sobie funkcję która będzie pozwalała nam formatować odpowiednio te

13:23obiekty do wyświetlenia w inpucie czyli dostajemy tutaj powiedzmy selection

13:29i będzie to albo string który ktoś wpisał albo

13:33już wybrany użytkownik user sprawdzimy

13:39jeśli jest to obiekt tak

13:43czyli jeśli powiedzmy selection

13:53to zwrócimy tylko z tego naszego selection tutaj

13:58widzisz nam od razu skoro wie że to jest obiekt to już nam podpowiada że chcemy name

14:03w przeciwnym wypadku zwrócimy po prostu

14:07selection tak jak jest jeśli jest to string zobaczmy teraz czy

14:11to nam ładnie poformatuje wartości tak

14:17wybieramy coś jeszcze jest nie tak format user suggestion

14:21o mamy niezapisany plik html czyli tutaj musimy zapisać to żeby

14:26on nam wykrył display with tą funkcje

14:32miyah miles okej

14:37i co tu jest jeszcze nie query to lowercase no właśnie jak tu już wybierzemy

14:41obiekt no to on próbuję wtedy wyszukiwać tego przy

14:45użyciu naszej funkcji tutaj szukania czyli zobaczmy jeszcze raz kod tutaj

14:50ten value changes w takim razie może być tu string a może w tym naszym

14:54inpucie pojawić się obiekt więc tutaj trzeba by było sprawdzić może

14:58użyję sobie filter że jak już mamy obiekt to żeby

15:02go nie wyszukiwało zobaczmy

15:07filter zaimportowałem z operatorów i sprawdzimy dokładnie

15:11to samo czyli nie jest to obiektem tak czyli selection jeśli

15:20nie jest obiektem tylko wtedy przepuszczamy zobaczmy

15:24teraz okej

15:31no i teraz tutaj właśnie w tym polu tutaj naszym forms

15:35control pojawi się nam obiekt jeśli pojawi się ten obiekt

15:39i go wybierzemy no to warto było wtedy wpisywać ten obiekt tutaj już nie jako tekst

15:43tylko tutaj jako obiekt przypisać

15:47do tej form control że jest to wybrany użytkownik i jeśli

15:53zobaczymy sobie tutaj html ponownie to tutaj możemy także

15:57dodać sobie różnego rodzaju zdarzenia które

16:01obsługę zdarzeń które występują na tym naszym auto

16:06complecie i tutaj możemy nasłuchiwać na zdarzenie autofill czyli kiedy ktoś

16:10kiedy nam przeglądarka automatycznie powiedzmy wypełni pola możemy to wykryć kiedy jest otwarty

16:14kiedy zamknięty jest podpowiadanie też się może przydać wiedzieć czy ktoś akurat ma otwarty ten panel czy

16:18coś wybiera czy już wybrał no i właśnie jak go wybrał to jest tutaj option selected

16:23dodamy

16:27sobie jakąś funkcję select assignee i przekażemy mu oczywiście zdarzenie które tutaj

16:31wystąpiło ja utworzę tą funkcję w tym miejscu tak

16:38tu powinna być już selection z konkretnym użytkownikiem

16:42którego ktoś chce do zadania przypisać no i

16:46jak mam tego użytkownika no to możemy pod this task tutaj extras

16:51assignee właściwie tutaj

16:55pobierz pole assignee czyli tutaj próbuję dać się do tego miejsca i

17:00ustalimy to selection tylko set value okej

17:05selection i żeby

17:10zobaczyć czy wszystko działa ja tutaj podejrzę sobie całą strukturę tego formularza czyli

17:14pod spodem tutaj w preformatowanym polu wyświetlimy

17:19sobie task extras value czyli

17:23wartość całego tego tutaj pola formularza zobaczymy czy nam się tutaj

17:27użytkownik pojawi w środku w tym elemencie object

17:32object już coś tam jest zobaczymy tutaj jak zrobimy json żeby

17:38to troszkę więcej wiedzieć o tym obiekcie mamy assignee null

17:42czyli nikt nie jest przypisany do naszego zadania wpiszemy sobie mia

17:47i coś poszło tu jeszcze nie tak no

17:52tak on próbuje skonwertować teraz złożony cykliczny obiekt do

17:59stringa czyli tutaj to nie jest

18:02zwykły selection tak naprawdę option selected zerknijmy do dokumentacji

18:06jest to bardzo skomplikowany obiekt zobaczmy tutaj zdarzenia custom

18:13input element okej

18:20zobaczmy sobie w dokumentacji to zdarzenie

18:25tutaj może

18:31tu będzie w api jak wygląda struktura tego

18:36event'a czyli zdarzenia okej

18:41jest to mat-autocomplete selected event no to

18:45zaimportujmy sobie ten typ i zobaczymy co to będzie czyli tutaj jak ktoś coś wybierze to

18:49będzie to zdarzenie tego typu czyli

18:53z tego selection musimy pobrać jeszcze option albo source czyli

18:57mamy dostęp do całego auto complete'a albo do wybranej opcji my chcemy opcję

19:01gdybyśmy chcieli cały auto complete to

19:06tutaj możemy pobrać informacje dokładnie wszystko na temat tego elementu

19:10czy jest otwarte jakie ma opcje która opcja jest zaznaczona panel

19:15i tak czyli możemy tu nie tylko dostać informację co zostało zaznaczone ale także wpłynąć

19:19na ten element może zostawić otwarte zamknąć zwinąć zaznaczyć

19:24i tak dalej czyli tym razem powinno być to okej powinniśmy zostawić tutaj opcję konkretną

19:29zobaczmy wybraną nikt nie jest zaznaczony wpiszemy sobie coś tam wybieramy

19:33sobie michelle jeszcze coś tu jest nie tak dalej

19:38próbuje mi cykliczną strukturę przypisać dlaczego zbadajmy to

19:42tutaj debuggerem okej

19:53co tu dostajemy selection option no

19:58właśnie jest to cała opcja a my chcemy tylko value czyli

20:02trzeba wiedzieć jeszcze trzeba jeszcze głębiej jak widzicie się dostać czyli

20:06option to jeszcze jest dopiero jedna opcja wybrana tu masz zaznaczone

20:10czy aktywna i tak dalej nas interesuje etykieta

20:15grupa id i

20:21możemy też zaznaczyć opcję odznaczyć czyli mamy pełną kontrolę

20:25nad tym co się dzieje nas interesuje value

20:30mamy wartość wyświetlaną czyli tą zwróconą z funkcji format

20:35albo faktyczną wartość od całego obiektu item value to

20:39powinien być nasz user

20:43dobra zobaczymy teraz

20:48trzeba dokładnie wybrać to co jest potrzebne z tego autocomplete'a okej

20:57mia i ładnie jako assign tutaj czyli przypisana osoba mamy cały obiekt włącznie

21:02z id name email position i tak dalej czyli nam formularzu pojawił cały obiekt

21:06czyli jak widzisz wartościami pola formularzy nie muszą być też stringi liczby tutaj wartością kontrolki

21:10może być cały obiekt czyli tu wybieramy albo string albo obiekt i dopiero jak mamy wybraną opcję

21:15to z tego takiego pomocniczego pola tymczasowego przepisujemy do

21:19tego właściwego pola formularza które moglibyśmy zserializować

21:23wysłać na serwer okej to tyle jeśli chodzi o auto complete

21:27jak widzisz tu dużo możliwości mamy też pełną kontrolę nad tym co się dzieje tak czyli autocomplete

21:32tylko nas poinformuje że ktoś coś pisze albo ktoś coś wybrał logikę musimy

21:36sami napisać ma to jednak tą korzyść zaletę że jesteśmy ograniczeni już

21:40jakimś gotowym zachowaniem tylko możemy tutaj w pełni wpłynąć na to co się dzieje na

21:45tak już wybierak to się zaznaczenie nie dostajemy tylko opcji wyboru ale

21:49cały auto complete wszystkie opcje całą kontrolkę możemy

21:53dokładnie w różne sposoby jak chcemy zareagować na to czy

21:57ktoś coś wybrał w naszym autocomplete'cie okej to tyle jeśli chodzi o auto-complete

22:02i do zobaczenia w kolejnej lekcji