Introducere în Formulare în Formulare Angulare 4 Șabloane

Ce veți crea

Formularele sunt esențiale pentru orice aplicație frontală modernă și sunt o caracteristică pe care o folosim în fiecare zi, chiar dacă nu o realizăm. Formularele sunt necesare pentru conectarea sigură a unui utilizator la aplicație, căutarea tuturor hotelurilor disponibile într-un anumit oraș, rezervarea unui taxi, crearea unei liste de sarcini și efectuarea a numeroase alte lucruri cu care suntem obișnuiți. Unele formulare au doar câteva câmpuri de intrare, în timp ce alte forme ar putea avea o serie de câmpuri care se întind până la câteva pagini sau file.

În acest tutorial, vom vorbi despre diferite strategii disponibile pentru dezvoltarea de forme în Angular. Indiferent de strategia pe care o alegeți, aici sunt lucrurile pe care ar trebui să le acopere o bibliotecă de formular:

Sprijină legarea bidirecțională astfel încât valorile de control ale intrărilor să fie sincronizate cu starea componentei.
Urmăriți starea formularului și folosiți indicii vizuale pentru a permite utilizatorului să știe dacă starea actuală este validă sau nu. De exemplu, dacă numele de utilizator are caractere nevalide, trebuie să apară o margine roșie în jurul câmpului de introducere pentru numele de utilizator.
Aveți un mecanism pentru a afișa corect erorile de validare.
Activați sau dezactivați anumite părți ale formularului dacă nu sunt îndeplinite anumite criterii de validare.

Introducere în forme în unghiuri

Angular, fiind un cadru frontal cu drepturi depline, are un set propriu de biblioteci pentru construirea unor forme complexe. Cea mai recentă versiune a Angular are două strategii puternice de construire a formelor. Sunt:

formularele bazate pe șabloane
mode-driven sau reactive

Ambele tehnologii aparțin @ unghiulare / formulare bibliotecă și se bazează pe aceleași clase de control al formei. Cu toate acestea, ele diferă remarcabil în filosofia lor, stilul de programare și tehnica. Alegerea unul peste altul depinde de gustul personal și de complexitatea formei pe care încercați să o creați. În opinia mea, ar trebui să încercați mai întâi ambele abordări și apoi să alegeți unul care să se potrivească stilului dvs. și proiectului la îndemână.

Prima parte a tutorialului va acoperi formularele bazate pe șabloane, cu un exemplu practic: construirea unui formular de înscriere cu validare pentru toate câmpurile de formular. În a doua parte a acestui tutorial, vom relua pașii pentru crearea aceluiași formular folosind o abordare bazată pe model.

Formulare bazate pe șabloane

Abordarea bazată pe șablon este o strategie împrumutată din era AngularJS. În opinia mea, este cea mai simplă metodă de construire a formularelor. Cum functioneazã? Vom folosi câteva directive unghiulare.

Directive vă permite să atașați comportamentul elementelor din DOM.
- Documentație unghiulară

Angular oferă directive specifice pentru formular pe care le puteți utiliza pentru a lega datele de intrare ale formularului și modelul. Directivele specifice formulelor adaugă funcționalități și comportamente suplimentare unui formular HTML simplu. Rezultatul final este că șablonul are grijă de valori obligatorii cu validarea modelului și a formularului.

În acest tutorial, vom folosi formularele conduse de șabloane pentru a crea pagina de înscriere a unei aplicații. Formularul va acoperi cele mai comune elemente de formă și diferite verificări de validare a acestor elemente de formă. Iată pașii pe care îi veți urma în acest tutorial.

Adăugați FormsModule la app.module.ts.
Creați o clasă pentru modelul de utilizator.
Creați componente și layout inițial pentru formularul de înscriere.
Utilizați directive de formă unghiulară cum ar fi ngModel, ngModelGroup, și ngForm.
Adăugați validarea utilizând validatoarele încorporate.
Afișați erorile de validare în mod semnificativ.
Manipulați depunerea formularului folosind ngSubmit.

Să începem.

Cerințe preliminare

Codul pentru acest proiect este disponibil pe replica mea GitHub. Descărcați zipul sau clonați repo-ul pentru ao vedea î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 componentă nouă pentru SignupForm.

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.

Șablonul HTML

Î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.

Șablon HTML

     Inscrie-te   E-mail  
   Parola  
  confirma parola  
   Sex  
     Confirmați că ați citit Termenii și condițiile

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.

Configurarea formularului de bază

Pentru a utiliza directivele bazate pe șabloane, trebuie să importăm FormsModule din @ unghiulare / formulare și adăugați-l la importuri array în app.module.ts.

app / app.module.ts

import FormsModule din '@ unghiular / formulare'; @NgModule (... import: [BrowserModule, FormsModule], ...) clasa de export AppModule

Apoi, creați o clasă care va deține toate proprietățile entității Utilizator. Putem folosi fie o interfață, fie o vom implementa în componentă, fie vom folosi o clasă TypeScript pentru model.

app / User.ts

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 clasei în componenta SignupForm. De asemenea, am declarat o proprietate suplimentară pentru sex.

app / înscriere / formularul de înscriere la form.component.ts

import Component, OnInit de la '@ angular / core'; // Importul modelului User import User din "./... / User"; @Component (selector: 'app-signup-form', templateUrl: './signup-form.component.html', styleUrls: ['./signup-form.component.css']) clasa de export SignupFormComponent implementează OnInit // Proprietate pentru genul privat de gen: string []; // Proprietatea pentru utilizatorul privat de utilizator: User; ngOnInit () this.gender = ['Bărbat', 'Femeie', 'Alții']; // Creați un nou obiect utilizator this.user = nou utilizator (email: "", parola: pwd: "", confirmă_pwd: "", sex: this.gender [0], termeni: false);

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ă.

app / înscriere / formularul de înscriere la form.component.html

    Inscrie-te...   Sex  
...

Apoi, dorim să legăm datele formularului la obiectul de clasă utilizator astfel încât atunci când introduceți datele de înscriere în formular, se creează un nou obiect utilizator care stochează temporar respectivele date. În acest fel, puteți păstra sincronizarea cu modelul, iar acest lucru se numește obligatoriu.

Există câteva moduri de a face acest lucru să se întâmple. Lasă-mă să te cunosc mai întâi ngModel și ngForm.

ngForm și ngModel

ngForm și ngModel sunt direcții unghiulare care sunt esențiale pentru crearea formelor bazate pe șabloane. Sa incepem cu ngForm primul. Iată un fragment despre ngForm din documentele angulare.

NgForm directiva suplimentează formă element cu caracteristici suplimentare. Acesta deține controalele pe care le-ați creat pentru elementele cu ngModel directivă și Nume atribuie și monitorizează proprietățile acestora, inclusiv valabilitatea acestora. De asemenea, are propriile sale valabil proprietate care este adevărată numai dacă fiecare control limitat este valabil.

Mai întâi, actualizați formularul cu ngForm directivă:

app / înscriere / formularul de înscriere la form.component.html

...

#signupForm este o variabilă de referință șablon care se referă la ngForm directivă care reglementează întreaga formă. Exemplul de mai jos demonstrează utilizarea a ngForm obiect de referință pentru validare.

app / înscriere / formularul de înscriere la form.component.html

Aici, signupForm.form.valid va reveni fals decât dacă toate elementele de formă vor trece verificările de validare respective. Butonul de trimitere va fi dezactivat până când formularul este valid.

În ceea ce privește legarea șablonului și a modelului, există o mulțime de modalități de a face acest lucru, și ngModel are trei sintaxe diferite pentru a aborda această situație. Sunt:

[(NgModel)]
[NgModel]
ngModel

Să începem cu prima.

Legarea în două direcții utilizând [(ngModel)]

[(NgModel)] efectuează legarea bidirecțională pentru citirea și scrierea valorilor de control ale intrărilor. În cazul în care un [(NgModel)] , câmpul de intrare ia o valoare inițială din clasa de componente legată și o actualizează înapoi ori de câte ori se detectează orice modificare a valorii de control de intrare (la apăsarea butonului și apăsarea butonului). Imaginea de mai jos descrie mai bine procesul de legare bidirecțională.

Iată codul pentru câmpul de introducere a e-mailului:

  E-mail

[(ngModel)] = "user.email" leagă proprietatea de e-mail a utilizatorului la valoarea de intrare. Am adăugat și o Nume atributul și setul name = "e-mail". Acest lucru este important și veți obține o eroare dacă nu ați declarat un atribut name în timp ce utilizați ngModel.

În mod similar, adăugați a [(NgModel)] și unic Nume atribuie fiecărui element de formă. Formularul dvs. ar trebui să pară așa:

app / înscriere / formularul de înscriere la form.component.html

...   Parola  
  confirma parola  
 
  Sex  
...

ngModelGroup este utilizat pentru a grupa împreună câmpuri de forme similare astfel încât să putem rula validări numai pe acele câmpuri de formular. Deoarece ambele câmpuri de parolă sunt legate, le vom pune sub un singur ngModelGroup. Dacă totul funcționează așa cum era de așteptat, legat de componente utilizator proprietatea ar trebui să fie responsabilă de stocarea tuturor valorilor de control ale formularului. Pentru a vedea acest lucru în acțiune, adăugați următoarele după eticheta formularului:

utilizator | json

Trageți proprietatea utilizatorului prin JsonPipe pentru a face modelul ca JSON în browser. Acest lucru este util pentru depanare și logare. Ar trebui să vedeți o ieșire JSON ca aceasta.

Valorile curg din punctul de vedere al modelului. Ce zici de altfel? Încercați să inițializați obiectul utilizatorului cu unele valori.

app / înscriere / formularul de înscriere la form.component.ts

this.user = nou utilizator (// inițializat cu unele e-mailuri de date: "[email protected]", parola: pwd: "", confirm_pwd: "", sex: this.gender [0]);

Și apar automat în vedere:

"email": "[email protected]", "parola": "pwd": "", "confirm_pwd": "", "sex": "Barbat"

Legarea bidirecțională [(NgModel)] sintaxa vă ajută să creați formulare fără efort. Cu toate acestea, are anumite dezavantaje; prin urmare, există o abordare alternativă care o folosește ngModel sau [NgModel].

Adăugarea ngModel la Mix

Cand ngModel este utilizată, de fapt suntem responsabili pentru actualizarea proprietății componentei cu valorile de control de intrare și invers. Datele de intrare nu intră automat în proprietatea utilizatorului componentei.

Deci, înlocuiți toate instanțele [(ngModel)] = "" cu ngModel. Vom păstra Nume atributul deoarece toate cele trei versiuni ale ngModel au nevoie de Nume atribuiți muncii.

app / înscriere / formularul de înscriere la form.component.html

 E-mail

Cu ngModel, valoarea atributului name va deveni o cheie a obiectului de referință ngForm signupForm pe care am creat-o mai devreme. Deci, de exemplu, signupForm.value.email va stoca valoarea de control pentru id-ul de e-mail.

A inlocui utilizator | json cu signupForm.value | json pentru că acolo este stocat tot statul acum.

Legarea în o singură cale folosind [ngModel]

Ce se întâmplă dacă trebuie să setați starea inițială din componenta de clasă legată? Asta e ceea ce [NgModel] pentru tine.

Aici datele curg de la model la vedere. Efectuați următoarele modificări ale sintaxei pentru a utiliza legarea unică:

app / înscriere / formularul de înscriere la form.component.html

 E-mail

Deci, ce abordare ar trebui să alegeți? Dacă utilizați [(NgModel)] și ngForm împreună, veți avea în cele din urmă două stări de întreținut-utilizator și signupForm.value-și care ar putea fi confuz.

"email": "[email protected]", "parola": "pwd": "thisispassword", "confirm_pwd": "thisssassword" mail ":" [email protected] "," parola ": " pwd ":" thisispassword "," confirm_pwd ":" thisssassword "," gender ":" Male " //signupForm.value

Prin urmare, vă recomand să folosiți metoda de legare unică. Dar asta e ceva pentru tine de a decide.

Validarea și afișarea mesajelor de eroare

Iată cerințele noastre pentru validare.

Toate comenzile de formular sunt necesar.
Dezactivați butonul Trimiteți până când sunt completate toate câmpurile de introducere.
Câmpul de e-mail trebuie să conțină strict un id de e-mail.
Câmpul parolei trebuie să aibă o lungime minimă de 8.
Atât parola, cât și confirmarea ar trebui să se potrivească.

Formularul nostru cu validare în vigoare

Primul este ușor. Trebuie să adăugați o necesar atributul de validare pentru fiecare element de formă, astfel:

app / înscriere / formularul de înscriere la form.component.html

În afară de necesar atribut, de asemenea, am exportat un nou produs #e-mail șablon variabilă de referință. Acest lucru este astfel încât să puteți accesa controlul Angular al cutiei de intrare din interiorul șablonului propriu-zis. Îl vom folosi pentru a afișa erori și avertismente. Acum utilizați proprietatea dezactivată a butonului pentru a dezactiva butonul:

app / înscriere / formularul de înscriere la form.component.html

Pentru a adăuga o constrângere la e-mail, utilizați atributul model care funcționează cu câmpurile de introducere. Modelele sunt folosite pentru a specifica expresii regulate ca cea de mai jos:

model = "[a-Z0-9 ._% + -]. + @ [a-Z0-9 .-] + \ [a-z] 2,3 $"

Pentru câmpul de parolă, tot ce trebuie să faceți este să adăugați a minlength = "" atribut:

app / înscriere / formularul de înscriere la form.component.html

Pentru a afișa erorile, voi folosi directiva condiționată ngIf pe un element div. Să începem cu câmpul de control al intrărilor pentru e-mail:

app / înscriere / formularul de înscriere la form.component.html

 E-mail  
    Câmpul de e-mail nu poate fi gol 
  Id-ul de e-mail nu pare corect

Se întâmplă multe aici. Să începem cu prima linie a secțiunii de eroare.

Amintiți-vă #e-mail care am exportat mai devreme? Acesta conține câteva informații despre starea de control a intrărilor din câmpul de e-mail. Aceasta include: email.valid, email.invalid, email.dirty, email.pristine, email.touched, email.untouched, și email.errors. Imaginea de mai jos descrie în detaliu fiecare dintre aceste proprietăți.

Deci elementul div cu * ngIf va fi redat numai dacă e-mailul este nevalid. Cu toate acestea, utilizatorul va fi întâmpinat cu erori cu privire la faptul că câmpurile de intrare sunt goale chiar înainte de a avea șansa de a edita formularul.

Pentru a evita acest scenariu, am adăugat cea de-a doua condiție. Eroarea va fi afișată numai după controlul a fost vizitat sau valoarea controlului a fost modificată.

Elementele div div imbricate sunt folosite pentru a acoperi toate cazurile de erori de validare. Folosim email.errors pentru a verifica toate erorile posibile de validare și apoi a le afișa înapoi utilizatorilor sub formă de mesaje personalizate. Acum urmați aceeași procedură pentru celelalte elemente de formă. Iată cum am codificat validarea parolelor.

app / înscriere / formularul de înscriere la form.component.html

   Parola  
  confirma parola  
   Parola trebuie să aibă mai mult de 8 caractere 
  Parolele nu se potrivesc

Aceasta începe să arate un pic dezorientat. Angular are un set limitat de atribute validator: necesar, Minlength, lungime maxima, și model. Pentru a acoperi orice alt scenariu, cum ar fi cel al comparării parolelor, va trebui să vă bazați pe imbricate ngIf cum am făcut mai sus. Sau, în mod ideal, creați o funcție validator personalizată, pe care o voi acoperi în a treia parte a acestei serii.

În codul de mai sus, am folosit Dacă altceva sintaxă care a fost introdusă în ultima versiune a Angular. Iată cum funcționează:

 Conținut valid ... 
 Conținut nevalid ...

Trimiteți formularul utilizând ngSubmit

Aproape am terminat formularul. Acum trebuie să putem trimite formularul, iar controlul datelor din formular trebuie să fie predat unei metode componente, de exemplu onFormSubmit ().

app / înscriere / formularul de înscriere la form.component.ts

...

Acum, pentru componenta:

app / înscriere / formularul de înscriere la form.component.ts

... public onFormSubmit (value, valid: valoare: User, valid: boolean) this.user = value; console.log (acest.user); console.log ("valid:" + valid);  ...

Demo final

Iată versiunea finală a aplicației. Am adăugat câteva clase de bootstrap pentru a face forma frumoasă.

rezumat

Cu toții suntem aici. În acest tutorial, am acoperit tot ce trebuie să știți despre crearea unui formular în Angular utilizând abordarea bazată pe șablon. Modelele bazate pe formulare sunt populare pentru simplitatea și ușurința utilizării lor.

Cu toate acestea, dacă aveți nevoie să construiți un formular cu multe elemente de formă, această abordare va deveni dezordonată. Deci, în tutorialul următor, vom acoperi modul de modelare a construirii aceluiași formular.

Împărtășiți-vă gândurile în comentariile de mai jos.

Aflați JavaScript: Ghidul complet

Am creat un ghid complet care vă ajută să învățați JavaScript, indiferent dacă începeți doar ca dezvoltator web sau doriți să explorați subiecte mai avansate.

Cod