Share
Ce veți creaAceasta este a doua parte a seriei despre introducerea formelor în unghiular 4. În prima parte, am creat un formular folosind abordarea bazată pe șablon. Am folosit directive cum ar fi ngModel, ngModelGroup și ngForm pentru supraîncărcarea elementelor de formă. În acest tutorial, vom lua o abordare diferită în ceea ce privește construirea formelor - modul reactiv.
Formele reactive adoptă o abordare diferită față de cea a formularelor bazate pe șablon. Aici, noi creăm și inițializăm forme de control obiecte în clasa noastră de componente. Ele sunt obiecte intermediare care dețin starea formei. Atunci le vom lega la formează elemente de control în șablon.
Obiectul de control al formei ascultă orice modificare a valorilor de control de intrare și acestea se reflectă imediat în starea obiectului. Deoarece componenta are acces direct la structura modelului de date, toate modificările pot fi sincronizate între modelul de date, obiectul de control al formularului și valorile de control de intrare.
Practic, dacă construim un formular pentru actualizarea profilului de utilizator, modelul de date este obiectul utilizator preluat de pe server. Prin convenție, aceasta este adesea stocată în proprietatea utilizatorului (this.user). Obiectul de control al formularului sau modelul de formular va fi legat de elementele de control ale formei reale ale șablonului.
Ambele modele ar trebui să aibă structuri similare, chiar dacă nu sunt identice. Cu toate acestea, valorile de intrare nu ar trebui să curgă direct în modelul de date. Imaginea descrie modul în care intrarea utilizatorului din șablon se îndreaptă spre modelul de formular.
Să începem.
Nu trebuie să fi urmat prima parte a acestei serii, pentru ca partea a doua să aibă sens. Cu toate acestea, dacă sunteți nou în formularele Angular, aș recomanda foarte mult să treceți prin strategia bazată pe șablon. Codul pentru acest proiect este disponibil în depozitul meu GitHub. Asigurați-vă că sunteți pe ramura dreaptă și apoi descărcați zipul sau, alternativ, clonați repo-ul pentru a vedea forma în acțiune.
Dacă preferați să începeți de la zero, asigurați-vă că aveți CLI Angular instalat. Folosește ng comandă pentru a genera un nou proiect.
$ ng new SignupFormProject
Apoi, generați o nouă componentă pentru SignupForm sau creați unul manual.
ng genera componenta SignupForm
Înlocuiți conținutul app.component.html cu asta:
Aici este structura directorului pentru src / director. Am eliminat câteva fișiere ne-esențiale pentru a păstra lucrurile simple.
. ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.ts │ ├── app.module.ts │ ├── înscriere formă │ │ ├ ── de înscriere form.component.css │ │ ├── înscriere form.component.html │ │ └── înscriere form.component.ts │ └── User.ts ├── index.html ├── principal .ts ├──┘ polyfills.ts ├────────────────────────────────────────────────────────────────────────────
După cum puteți vedea, un director pentru SignupForm componentă a fost creată automat. Acolo este cea mai mare parte a codului nostru. De asemenea, am creat un nou User.ts pentru stocarea modelului nostru de utilizator.
Înainte de a ne scufunda în șablonul de componente actual, trebuie să avem o idee abstractă despre ceea ce construim. Deci, aici este structura de formă pe care o am în mintea mea. Formularul de înscriere va avea mai multe câmpuri de introducere, un element selectat și un element de casetă de selectare.
Aici este șablonul HTML pe care îl vom folosi pentru pagina noastră de înregistrare.
Clasele CSS folosite în șablonul HTML fac parte din biblioteca Bootstrap utilizată pentru a face lucrurile frumoase. Deoarece acesta nu este un tutorial de design, nu voi vorbi prea mult despre aspectele CSS ale formularului decât dacă este necesar.
Pentru a crea un formular reactiv, trebuie să importați ReactiveFormsModule din @ unghiulare / formulare și adăugați-o la matricea importurilor din app.module.ts.
// Import import ReactiveFormsModule ReactiveFormsModule de la '@ unghiular / formulare'; @NgModule (... // Adăugați modulul importurilor Array imports: [BrowserModule, ReactiveFormsModule ...) clasa de export AppModule
Apoi, creați un model de utilizator pentru formularul de înregistrare. Putem folosi fie o clasă, fie o interfață pentru crearea modelului. Pentru acest tutorial, voi exporta o clasă cu următoarele proprietăți.
clasa de export User id: number; e-mail: șir; // Ambele parole sunt într-o singură parolă de obiect: pwd: string; confirmPwd: șir; ; sex: șir; termeni: boolean; constructor (valori: Object = ) // Initializare constructor Object.assign (acest lucru, valori);
Acum, creați o instanță a modelului Utilizator în SignupForm component.
import Component, OnInit de la '@ angular / core'; // Importul modelului User import User din "./... / User"; @Component (selector: 'app-înscriere formă', templateUrl: './signup-form.component.html', styleUrls: [“./signup-form.component.css']) export clasă SignupFormComponent implementează OnInit // Lista de gen pentru elementul de control selectiv genderList: string []; // Proprietatea pentru utilizatorul privat de utilizator: User; ngOnInit () this.genderList = ['Bărbat', 'Femeie', 'Alții'];
Pentru înscriere-form.component.html fișier, voi folosi același șablon HTML discutat mai sus, dar cu modificări minore. Formularul de înscriere are un câmp selectat cu o listă de opțiuni. Deși acest lucru funcționează, o vom face modul Angular prin introducerea în listă folosind ngFor directivă.
Notă: Este posibil să primiți o eroare care spune Niciun furnizor pentru ControlContainer. Eroarea apare când o componentă are a
Avem o componentă, un model și un șablon de formă la îndemână. Ce acum? Este timpul să ne murdărim mâinile și să ne cunoaștem API-urile de care aveți nevoie pentru a crea forme reactive. Aceasta include FormControl și FormGroup.
În timp ce construiți formulare cu strategia formelor reactive, nu veți întâlni directivele ngModel și ngForm. În schimb, folosim API-ul FormControl și FormGroup.
Un FormControl este o direcție folosită pentru a crea o instanță FormControl pe care o puteți utiliza pentru a urmări starea unui anumit element de formă și starea sa de validare. Acesta este modul în care funcționează FormControl:
/ * Import FormControl prima * / import FormControl din '@ unghiular / formulare'; / * Exemplu de creare a unei noi instanțe FormControl * / class de export SignupFormComponent email = new FormControl ();
e-mail este acum o instanță FormControl și o puteți lega de un element de control al intrării în șablon după cum urmează:
Inscrie-te
Elementul Formular șablon este acum legat de instanța FormControl din componentă. Ceea ce înseamnă că orice modificare a valorii de control a intrărilor se reflectă la celălalt capăt.
Un constructor FormControl accepta trei argumente-o valoare inițială, o serie de validatoare de sincronizare, și o serie de async validatoare și după cum ați ghicit, toate sunt opționale. Vom prezenta primele două argumente aici.
Accentsconagua
import Validatorii de la '@ unghiular / formulare'; ... / * FormControl cu valoare inițială și validator * / email = nou FormControl ('[email protected] ', Validatori.required); Angular are un set limitat de validatori încorporați. Metodele de validare populare includ Validators.required, Validators.minLength, Validators.maxlength, și Validators.pattern. Cu toate acestea, pentru a le utiliza, trebuie să importați mai întâi API-ul Validator.
Pentru formularul nostru de înscriere, avem mai multe câmpuri de control al intrărilor (pentru email și parolă), un câmp selector și un câmp de casetă de selectare. Mai degrabă decât să creezi individ FormControl obiecte, nu ar fi mai logic să grupezi toate acestea FormControls într-o singură entitate? Acest lucru este benefic, deoarece putem urmări acum valoarea și valabilitatea tuturor obiectelor Sub-FormControl într-un singur loc. Asta e ceea ce FormGroup este pentru. Așadar, vom înregistra o grupă parentală FormGroup cu mai multe copii FormControls.
Pentru a adăuga o FormGroup, importați-o mai întâi. Apoi, declarați signupForm ca proprietate de clasă și inițializați-o după cum urmează:
// Importați API-ul pentru a construi un formular de import FormControl, FormGroup, Validators din '@ unghiular / formulare'; clasa de export SignupFormComponent implementează OnInit genderList: String []; signupForm: FormGroup; ... ngOnInit () this.genderList = ["Bărbat", "Femeie", "Alții"]; this.signupForm = new FormGroup (email: new FormControl (“Validators.required), PWD: new FormControl (), confirmPwd: new FormControl (), gen: new FormControl (), termenii: new FormControl ())
Legați modelul FormGroup la DOM după cum urmează:
