Ndërtimi i formularëve në Angular është intuitiv derisa të arrini në pikën e vlefshmërisë së hyrjes së përdoruesit. Puna e një Inxhinieri Frontend do të ishte shumë më e lehtë nëse përdoruesve do t'u besohej futja e vlerave të duhura në secilën fushë hyrëse. Fatkeqësisht, kjo nuk është gjithmonë e mundur. Prandaj, rëndësia e vërtetimit të hyrjeve të përdoruesit në pikën e hyrjes nuk mund të mbitheksohet.

Cilat janë gjithsesi format Reaktive në Angular?

Qasja reaktive për krijimin e formularëve në Angular është ajo ku e gjithë logjika e vlefshmërisë së formularit i kalohet ViewModel. Fushat e formularit inicohen në ViewModel dhe kanë lidhje të dyanshme si parazgjedhje, dhe për këtë arsye përditësimet e gjendjes bëhen automatikisht. Meqenëse logjika e vlefshmërisë bëhet në ViewModel, shablloni bëhet më pak kompleks.

Ndërtoni një formë Reaktive të Regjistrimit të Përdoruesit në Angular

Ne do të ndërtojmë një Formë Reactive për regjistrimin e një përdoruesi (klienti).

Këtu është lidhja për aplikacionin përfundimtar: Lidhja

Shtoni ReactiveFormsModule në modulin prind

Siç mund ta keni vënë re, çdo komponent në Angular është deklaruar në një modul prind. Kjo siguron që të gjithë komponentët e shtuar në grupin e deklaratave të kenë akses në klasat në modulet e importuara. Prandaj, për të përdorur Format Reaktive në komponentin tonë të aplikacionit, duhet të importojmë ReactiveFormsModule nga @angular/forms dhe ta shtojmë atë në grupin imports të kaluar në direktivën @NgModule.

Importoni formularin dhe klasat e vlefshmërisë nga angular/format në komponent

Klasa FormBuilder e bën të lehtë ndërtimin e formave komplekse dhe të thjeshta duke hequr nevojën për krijimin e shembujve të FormGroups, FormArrays or FormControls.

Klasa FormGroup kombinon vlerat dhe statusin e të gjitha kontrolleve (inputeve) të formës në një objekt. Në thelb, ai grumbullon statusin e të gjitha fushave në formë në statusin e vetë formularit. Për shembull, duke supozuar se ka 3 kontrolle të formularit (fusha hyrëse) në një FormGroup, nëse njëra nga fushat e hyrjes është e pavlefshme, statusi i formularit gjithashtu do të ishte i pavlefshëm. Statusi i formularit do të jetë i vlefshëm vetëm nëse të gjitha kontrollet e formularit janë të vlefshme.

Klasa Validator ofron një grup funksionesh të integruara të vërtetimit statik që mund të përdoren nga një kontroll formulari. Klikoni këtu për listën e funksioneve të vërtetimit.

Zhvilloni FormGroup

Për projektin tonë, klientit do t'i kërkohet të japë të dhënat personale të mëposhtme: Emri, mbiemri, emaili dhe adresa. Të dhënat e adresës ndahen më tej në pjesë më të vogla, ato janë: lineOne, lineTwo, qytet, shtet, shtet.

Për të siguruar pajtueshmërinë e plotë, ne përfundimisht do ta bënim çdo hyrje të detyrueshme dhe do ta çaktivizonim paraqitjen e formularit derisa klienti të futë detajet e sakta. Tani për tani, formulari është zhvilluar siç tregohet më poshtë:

UserForm inicializohet me llojin FormGroup në rreshtin e parë. Gjithashtu, prona e shembullit të klasës private fb krijohet dhe caktohet klasa FormBuilder në parametrin e konstruktorit. Kjo i kalon të gjitha funksionet e klasës FormBuilder të cilat janë group(), control(), and array() te vetia e klasës fb.

Funksioni group në klasën FormBuilder ndërton shembullin FormGroup duke marrë si parametër një objekt të FormControls. FormControls janë fushat hyrëse që përfaqësojnë të dhënat që do të mblidhen nga përdoruesi (emri, mbiemri, etj.). Fusha address është një objekt i ndërthurur në pronën e përdoruesit që përmban informacione për qytetin, shtetin, shtetin e përdoruesit, etj. Duke e bërë adresën si një formë në një formë tjetër, prandaj adresa do të ishte një FormGroup i vendosur në një FormGroup.

Shtoni funksionin onSubmit

Zhvilloni formularin në skedarin e shabllonit

Dizajnimi i formës në skedarin e shabllonit është vetëm pak i ndryshëm nga zbatimi i HTML.

Eh! Kjo ishte shumë, le të bëjmë një pushim të shkurtër dhe të admirojmë këtë mace të lezetshme që gogëson. (Për të parë përparimin tonë, kliko këtu)

Mirëse u ktheve. Le të vazhdojmë në fazën tjetër, duke shtuar vërtetimet.

Vleresimi i formularit

Shtoni funksionet Validator në inicializimin e FormGroup

Për të siguruar përputhje të rreptë në formularin e regjistrimit të klientit, ne duhet të shtojmë vërtetime në kontrollet userForm.

Funksionet e vlefshmërisë mund të jenë ose funksionet thestatic në klasën Validators ose funksionet e verifikimit të krijuara me porosi, ato nuk janë të detyrueshme dhe gjithashtu mund të ketë vërtetues të shumtë të bashkangjitur në një FormControl. Për rastin kur vërtetuesit janë në shumëfish, funksionet duhet të renditen në një grup.

E rëndësishme të theksohet është se validuesit mund të jenë funksione sinkron ose asinkron. Nëse një shumëfish i funksioneve sinkron dhe asinkron i shtohen një FormControl, verifikuesit sinkron kontrollohen së pari përpara vërtetuesve asinkronë për të optimizuar përdorimin e burimeve.

Shtimi i funksioneve të verifikuesit do të aktivizojë vetitë status dhe error të formularit dhe kontrolleve të tij.

Shto mesazhe të verifikimit për fushat e kërkuara ose hyrje të gabuara

Shto procesor të pavlefshëm të hyrjes

Fatkeqësisht, si në kohën e këtij artikulli, format Angular nuk përditësojnë veçorinë e gabimit FormGroup edhe nëse ka gabime në kontroll (shih çështjen). Për këtë arsye, do të na duhej të krijonim objektin tonë të gabimeve duke përsëritur mbi kontrollet e formularit sa herë që ndryshon vlera e hyrjes ose ngjarja blur lëshohet për të kontrolluar për gabime.

Këtu përsëritësi shikon përmes pemës form për gabime në hyrje. Ndryshorja control përfaqëson formControl siç përcaktohet në objektin e kaluar në funksionin fb.group më parë (emri, mbiemri,…, adresa).

Përsëritësi kontrollon nëse çdo control është një shembull i një FormGroup, kontrolli address do ta kalonte këtë test, pastaj fushat e FormGroup të mbivendosur do të përsëriten gjithashtu.

Nëse çelësi nuk është një shembull i një FormGroup, përsëritësi kontrollon vetitë e statusit të kontrolleve për të përcaktuar vlefshmërinë e tyre. Nëse kontrolli (fusha e hyrjes) përmban gabime dhe është prekur ose ka vlera, përsëritësi harton mesazhin e vërtetimit të hyrjes në objektin e gabimit. Objekti i gabimit do të mundësonte paraqitjen e gabimeve në kontrollin përkatës në pamjen (skedarin e shabllonit).

Kontrolli i formularit dhe Karakteristikat e statusit të formularit

  1. dirty: (boolean) true nënkupton që vlera është futur
  2. e pacenuar:(boolean) e kundërta e pis
  3. disabled: (boolean) e vërtetë nëse hyrja është e çaktivizuar
  4. aktivizuar: (boolean) e kundërta e të paaftë.
  5. e pavlefshme: (boolean) e vërtetë nëse hyrja e kontrollit ka një gabim
  6. në pritje: (boolean) e vërtetë për ngjarje asinkrone në pritje të përgjigjes
  7. e paprekur: (boolean) e vërtetë nëse fusha e hyrjes nuk është prekur/ndryshuar
  8. valid: (boolean) e kundërta e pavlefshme
  9. errors:(objekt) që përbëhet nga gabimet aktuale të vërtetimit të hyrjes. Për shembull, forma jonë do të kishte një veti gabimi për emailin si {required: true} nëse nuk është futur asnjë vlerë ose {email: true} nëse vlera e futur nuk është email.
  10. statusi: (string) është ose VALID/INVALID në varësi të gjendjes së kontrolleve të tjera.

Shtoni vërtetimin në shabllon

Në mënyrë që përdoruesi të marrë mesazhet e vlefshmërisë, duhet të kemi një tregues që të tregojë një gabim në hyrje dhe t'ia kalojë përdoruesit mesazhin e ruajtur në mesazhet për hyrjet. Për ta bërë këtë, ne do të përdornim objektin e gabimit (mesazhin) të krijuar në modelin tonë të pamjes së mësipërme.

Gjërat për t'u theksuar këtu janë:

  1. Lidhja e vetive [ngClass] mundëson që elementi të ndryshojë klasën me ndryshimin e kushtit. Në pjesën e kodit të mësipërm, vetia ngClass thotë se ngjyra e kufirit duhet të kthehet në të kuqe nëse ekziston një gabim në objektin e mesazheve për fushën e hyrjes lineOne.
  2. *ngIf merr një deklaratë të kushtëzuar dhe shfaq elementin vetëm nëse kushti është i vërtetë.
  3. Butoni "Dorëzo" është i çaktivizuar derisa vetia e vlefshme e formës të jetë e vërtetë.
  4. {{}} paraqet një interpolim. Kjo lejon që deklaratat Javascript nga modeli të shfaqen në model.

Gjëra të tjera për t'u theksuar

Ndryshimet e vlerës dhe ngjarja e turbullimit u monitoruan në formën me funksionet e mëposhtme:

Direktiva viewChildren është e ngjashme me document.getElementById në atë që është pajisur me një identifikues dhe kthen një QueryList të elementeve të ngjashëm brenda pamjes. Meqenëse Angular është agnostik për platformën, që do të thotë se mund të mos ekzekutohet domosdoshmërisht në ueb, është e preferueshme të përmbaheni me mënyrën Angular (@viewChildren). Direktiva viewChildren thirret përpara funksionit ngAfterViewInit.

Baza jonë e kodit mund të bëhet paksa shumë komplekse nëse vendosim të monitorojmë ngjarjen blur të çdo kontrolli manualisht në shabllon. rxjs ofron një funksion të thjeshtë të dobisë që krijon të vëzhgueshme nga burimet e ngjarjeve në elementë. Ky është funksioni fromEvent, e kemi përdorur në krijimin e vëzhguesve nga ngjarja blur në nativeElement të formControls ElementRef.

Observables, pasi të abonohen, do të njoftojnë automatikisht funksionin e nënshkrimit kur ndryshon gjendja e formës. Për t'u abonuar për të gjitha vëzhguesit në një vend, funksioni merge iu kalua të gjitha vëzhguesve shqetësues.

Funksioni debounceTime siguron që një kohë e shkurtër (.5s) të kalojë përpara se mesazhi t'i shfaqet përdoruesit.

Dhe ne kemi mbaruar.

Për të parë kodin burimor të plotë për projektin tonë, kliko këtu.

Në këtë artikull, unë kam qenë në gjendje të mbuloj

  1. Format reaktive këndore ("lexim i mëtejshëm", "kurs Pluralsight")
  2. FormControls, FormBuilder, grupet e formave dhe Validuesit (lexim i mëtejshëm)
  3. ViewChildren Directive (lexim i mëtejshëm)
  4. rxjs, Observables, fromEvent dhe bashkoni vetitë (lexim i mëtejshëm).

Ju lutemi hidhni komentet, pyetjet ose komentet tuaja në seksionin e komenteve më poshtë dhe unë do të përgjigjem sa më shpejt të jetë e mundur.

Gjithashtu, nëse keni arritur deri këtu, ju lutemi vazhdoni dhe lëshoni një ose dy duartrokitje. Kjo do të ma bënte vërtet ditën. :).