Angular: Moduł i dyrektywy formularzy

Angular 10+

0:00Ostatniej sekcji naszej strony głównej

0:02znajdzie się taki prosty formularz kontaktowy gdzie ktoś będzie mógł

0:07wypełnić sobie jakieś dane wyrobić sobie temat wiadomości wysłać tam

0:13wiadomość i teraz pokażę tobie jak można taki prosty HTML owy formularz nie ma

0:19w nim nic specjalnego jak możemy go spiąć aby na przykład zakaz zmienić coś w

0:25którymś polu to te dane znaleźć na necie lub w drugą stronę.

0:30Jeśli mamy już gotowe dane w komplecie to jak wypełnić tymi danymi pola formularza.

0:36Jeśli robiliśmy to w poprzednich lekcjach to był taki bardzo prosty sposób.

0:41Tutaj Pokażę ci kilka różnych możliwości w tym bardzo fajny moduł formularzy który

0:46nam troszeczkę przyśpieszy prace zaczniemy od takiego prostego przykładu

0:50czyli stworzyć jakiś taki kontakt forum i w środku będziemy mieli po kolei

0:56wszelkie dane formularza czyli nam to będzie tekst e-mail.

1:01To będzie też tekst i tak dalej czyli agreement to

1:07będzie buli prawda fałsz to PIK czyli temat też tekst.

1:13No i najważniejsze wiadomość czyli tekst.

1:16Teraz chciałbym

1:17tutaj te informacje tymi informacjami wypełnić tutaj ten obiekt

1:22czy jak pamiętasz musiałbym obserwować kiedy się bardzo szybko zmieni

1:26i za każdym razem z tego eventu z tego zdarzenia wyciągnąć odpowiednią wartość i

1:30przypisać ją w odpowiednim miejscem w danych czyli taki szybki przykład

1:34powiedzmy sobie Change event tam w środku target i Value

1:40target to jest ten GIF i jego wali to jest wartość tuż po zmianie

1:45i teraz chcą to przypisać do nam czyli do naszego Contact form.

1:51Kropka.

1:53Przy tym to wartość by zobaczyć co się dzieje z tym obiektem

1:57byśmy widzieli na żywo co się w nim znajduje.

2:00Te utwory tutaj jeszcze reformator bo ładnie.

2:05Nie ma cięć spacji przez HTML tylko żeby zachował odpowiednie formaty.

2:10Full contact for przepuszcza przez sąd żebyśmy mogli

2:14zobaczyć jak Jackson całą zawartość tego naszego morza

2:17kontaktowego musi jeszcze w maju wpisze powiedzmy anonim.

2:23Może też w drugą stronę co zrobić jak

2:24komentarz że wartość początkowa ma być pobrana stąd

2:31i przypisane do wagi czyli indeks powinien mieć domyślnie anonim

2:36jeśli zmieni wartość to powinno się zmienić w formularzu zobaczmy.

2:41Czyli mamy teraz tutaj anonim i tu jest anonim.

2:44To się zgadza.

2:45Jeśli tak pisać to tych zmian nie widzimy na żywo.

2:48No to dlatego że część to zdarzenie które

2:51występuje kiedy ja skończę pisać kiedy opuszczę to pole.

2:54Wtedy jak widzisz się aktualizuje. Czyli np.

2:56musielibyśmy wiedzieć że jesteśmy przy każdej zmianie to np.

2:59zmniejszona lub Kidman

3:02ale też na przykład jeśli ktoś naprawdę świetnie tekst to też to nie zareaguje.

3:08Więc znowu może inne zdarzenie.

3:11Jeśli mieliśmy kolejny element np.

3:14to samo chcieli zrobić dla tutaj

3:17powiedzmy Xboxa no to musimy wiedzieć tak że to jest agreement czyli która zmienna.

3:25Spróbujmy walił import to w ten sposób.

3:29To ten czy boksu.

3:31Widzisz też źle się zachowuje.

3:34Musimy wiedzieć o tym że to nie jest.

3:36Tylko czekać.

3:37Jak widzisz praca z formularza mi.

3:40Trzeba wiedzieć jakie pole jakiego typu

3:43pole gdzie przepisać dane i jakie elementy użyć tutaj w różnych sytuacjach.

3:49Jest to dużo informacji które trzeba podać ręcznie za każdym razem żeby to działa

3:54prawidłowo i czasami mieć też taką bardzo wąską dokładną obrazami to możesz

4:00w tę stronę właśnie dwukierunkowy wspinać pokazują dane do środka.

4:04Wyciągamy z powrotem i w ten sposób to

4:06pole jest synchronizacja dwustronne z tymi danymi.

4:10To jest pytanie czy może troszeczkę krócej

4:12zapisać bo jest to jak widzisz troszkę dużo kodu i dużo rzeczy do zapamiętania

4:17dla każdego pola musimy wiedzieć jaki event takie Jaka własność.

4:21Na szczęście Angola posiada bardzo fajny moduł gotowe formularzy który pozwoli nam

4:26to zrobić prościej czyli zamiast wiedzieć czy to ma być Walii czy to czy

4:31mogę po prostu użyć sobie czegoś takiego jak model i teraz domyślnie w ogóle że

4:37jak spróbuje model to taki błąd że Qian odbijać będzie model.

4:41Ponieważ to nie jest znana właściwość

4:44go nie rozpoznaje dyrektywy będzie model a nie.

4:48Tak samo jak będzie klastrów nasze dyrektywy jest zachowaniem które mogę

4:51przypiąć do elementu pod warunkiem że ten model jest zdefiniowany.

4:55Tez muszę żeby on działał mógł użyć to muszę iść naszego modelu.

5:02Tu się znajdą się wszystkie dyrektywy i

5:03komponenty znajdują się tutaj jakie za importowane także dyrektywę Anglii

5:09za importowane z tego modułu teraz mogłyby nas pokusić żeby dopisać N czy model.

5:17Tutaj w ten sposób i za importować go z

5:21pakietu Angola Forbes musiały same importować.

5:27To nie zadziała za dobrze. Zobaczmy.

5:30To pokazuje że problem przy kompilacji A

5:33to dlatego że ten model nie działa w pojedynkę.

5:36On potrzebuje kilku innych dyrektyw

5:38współpracujących do działania dlatego jest miejscami gdzie młody

5:41importować z importuje cały moduł i przeważnie jeśli chcesz kupować

5:45właśnie takie biblioteki itd to nie import pojedynczych właśnie klas pojedynczych

5:50komponentów tylko import i zawsze cały moduł bo ten moduł zawiera od razu cały

5:55zestaw gotowych wszystkich komponentów czy dyrektyw nie tylko tę jedną dyrektywę

6:01którą myślę że Ty potrzebujesz naprawdę na potrzeby czegoś jeszcze.

6:06I teraz moduły jak widzisz dodam do deklaracji to nie zadziałało.

6:09Pamiętaj żeby moduły tutaj dodać wraz z modelami.

6:13Jak masz wątpliwość zobacz gdzie są komponenty i dyrektywy są w deklaracjach.

6:17Elementy HTML owe są tutaj jesteś masz paczkę z wieloma oponentami z

6:21wieloma dyrektywami to musisz ją za importować z importu.

6:26Jeśli masz wątpliwość po prostu Spójrz gdzie są komponenty tam komponenty.

6:30Spójrz gdzie są moduły i tam już moduły

6:33czyli moduł jak tylko zobacz dodałem do portów tak mój błąd automatycznie znika

6:38ten model teraz jest tym elementem czyli tam wypełnił tymi danymi

6:43elegancko formularz ale synchronizacja zmian w drugą stronę.

6:47No to się nie dzieje przez model to się dzieje dlatego że tutaj mamy

6:51nasz event dziś event i spróbuję zobaczyć czy te dane będą proponowane z naszego

6:57pola HTML owego komponentu to jak widzisz to się teraz nie dzieje.

7:02Jeśli spojrzymy tutaj to już wiesz że jest to po prostu import

7:06czyli dyrektywa będzie model importu który nazywa się także będzie

7:09model i wartości które przypisują do tej dyrektywy.

7:13Ona po prostu ustawia jako wywalił tutaj lub np.

7:17selektywnie. Czy czeka na innych elementach formularza.

7:21Jeśli chcemy wiedzieć czy się coś stało w

7:23środku coś się zmieniło to także musimy dodać event.

7:26Czyli mogę jeść jakiś zwykły znowu event Change albo import.

7:32Ale spójrzmy się pojawił jeszcze dodatkowo event NG model Change.

7:37Teraz nie musimy wiedzieć czy to jest impuls czy też czek czy to wcale

7:41nie musi być dokładnie jaki typ pola emituje jakieś zdarzenie tylko ten model.

7:46Ten model przechwycił oryginalne znaczenie

7:49i na event Emitent wyemituje auto put z tą informacją co jest jeszcze bardzo fajne.

7:55Nie muszę wiedzieć jaki jest rodzaj pola gdzie ją to zawiera.

7:58Czym jest target check.

8:00Czy target Select czy Target walił tylko

8:02sam event to już jest scena dla nas sama wartość.

8:06Czy jak widzisz dużo prościej po prostu przypominam sobie tutaj Change i went

8:13to jest czek możesz tylko zapomnieć o tym że te dane trzeba gdzieś przypisać czyli

8:18w ten sposób to nie zadziała jeśli chcemy zsynchronizowane to z tym polem.

8:22Tutaj kontakt tak nam.

8:25Wartość z powrotem do tego pola.

8:30Zobaczmy czy to zadziała.

8:32Czyli teraz tak to co tutaj mamy ustawiane jest tu

8:37nawet gdyby tutaj miał trup na początku to to trup będzie ustawiony tutaj jako sala.

8:43Anonim pojawi się tu jeśli tu wprowadzą zmiany są od razu dostępne w krypcie.

8:48Jeśli tu wprowadzą zmiany widzisz one też

8:50się pojawiają kolejne po latach tak samo się zachowa

8:54aczkolwiek jedna rzecz już mi się nie podoba.

8:56Dodam że 2 jeszcze samo to jest to się przydaje takie osobne podłączenie np.

9:02powiedzmy ten name powiedzmy zrobić tu powiedzmy po powiększyć albo ten

9:10ktoś wpisał te dane to może chciałbym jeszcze je jakoś tam zwali.

9:14Więc jeśli masz potrzebę przechwycenia modyfikowania tych danych w locie pomiędzy

9:19komponenty a formularze to może dojść jakieś specjalne modyfikacje jakieś

9:24specjalne transformację nim te dane trafią we właściwe miejsce.

9:27Jeśli jednak po prostu chcesz spiąć to pole z tą zmienną w dwie strony żeby

9:32pracowały bez żadnych specjalnych zmian to pokaże ci fajnie trik.

9:36Cały ten event

9:37można schować do środka tutaj w postaci takich napisów okrąg

9:43teraz nie pomyśl że nie możesz umieścić nawozów na zewnątrz.

9:46To nie zadziała.

9:47Tak to jest nasza skrzynka i do skrzynki banany wkładamy do środka bananów.

9:55Nie umiesz po raz szynką bo zgubić tak

9:58łatwo będzie zapamiętać banany zawsze te skrzynki.

10:01W ten sposób i teraz jak to działa to nie jesteś psem dla model Change nakaże

10:07ci import powiedzmy A B C jeśli ten import ma

10:12w parze AUD but który nazywa się a b c Change lub placki i placki change to każdy

10:19taką parę możesz zwinąć połączyć właśnie w ten sposób jako parę

10:25powiązanych import model jest akurat jednym takim przykładem

10:30Zobacz który bardzo fajnie się to pisze bo robi to on gdzie model

10:33wskazuje która zmienna czyli kontakt form kropka email i już mam te dwa pola spięte

10:41ze sobą i będą się one w dwie strony chronić.

10:44Zawsze pamiętaj że możesz zrobić to tylko w jedną stronę jeśli chcesz żeby tylko nas

10:49używać w ten sposób tylko nad wpisujemy dane.

10:52Jeśli chciałbyś tylko słuchać to nie

10:55możemy niestety samego eventu zrobić musisz umieścić tutaj atrybut żeby ta

10:59dyrektywa się tutaj zamontowany jako obiekt i dopisać tutaj zdarzenie ręcznie.

11:05Tak jeśli chcesz jednak w dwie strony no to skrzynka

11:09banany będzie model i to samo mogę robić po prostu dla

11:13wszystkich tych standardowych HTML owych pól formularza czyli import import import.

11:19Co tu mamy. Mamy Select.

11:22Tak samo mogę sobie ustawić tutaj Select i jesteśmy to plik.

11:26I tutaj wartość walut wybranego pola

11:29aktualnie pojawi się w pliku czyli powiedzmy postawimy

11:34pierwsze tutaj jako New żeby ten pierwszy był jako sekretariatu

11:40żeby zmienić kolejność żeby też byśmy widzieli że to zadziała.

11:44I tu jeszcze mamy tekst najważniejsze

11:47czyli nasz Message też podjęte w tym miejscu.

11:51Mesjasz jest na początku pusty message.

11:54Jak też bardzo szybko.

11:55Błyskawicznie mogę to formalnie złożony

11:57skomplikowany formularz synchronizacji z obiektem JavaScript.

12:03Tutaj mamy ok przycisk powiedzmy Send message.

12:07Jeśli klik klik powiedzmy Send message i w tej funkcji Send message

12:17Widzisz mamy bardzo prosty dostęp do tych danych.

12:19Pomogę po prostu zrobić konsol blog na przykład i te dane są dostępne tutaj DS.

12:27Czy może być dowolnej biblioteki służącej do wysyłania maili.

12:31Tak dowolnego serwisu podpiąć tutaj potrzebne dane klucz adres.

12:37I te wszystkie dane powstawać odpowiednie

12:38parametry i stąd wysłać e-mail do użytkownika.

12:43Ja sprawdzę tylko ktoś ładnie synchronizację i teraz cokolwiek zmienia.

12:48Ok.

12:50Której na początku widzisz opcja nie jest zaznaczona Jeśli zmieniać coś innego to

12:54tutaj się ładnie zmieniają nam też opcje to plik.

12:57No i najważniejsze jest to cały obiekt jest tu dostępny.

13:03Możemy go wysłać do bazy danych możemy

13:04wysłać maila możemy go zapisać i robić co chce.

13:08Oczywiście tutaj zgoda nie powinna być na starcie.

13:11To zmieni jeszcze na Falls

13:13i jest to taki bardzo prosty i szybki sposób na zrobienie prostego formularza.