Što je dvosmjerno uvezivanje u Angularu?

Dvosmjerno uvezivanje omogućuje korisnicima unos podataka iz HTML datoteke i njihovo slanje u TypeScript datoteku i natrag. Ovo je korisno za provjeru valjanosti unosa, manipulaciju i još mnogo toga.

Nakon što proslijedite podatke iz HTML-a u datoteku TypeScript, možete koristiti podatke za dovršetak određene poslovne logike. Primjer scenarija bio bi da želite provjeriti postoji li već ime uneseno u polje za unos.

Kako možete koristiti dvosmjerno uvezivanje?

Dvosmjerno uvezivanje u Angular aplikacijama obično je postavljeno u .html datoteku, koristeći ngModel direktiva. Dvosmjerno uvezivanje u obrascu za unos može izgledati otprilike ovako:

<ulazni 
 vrsta="elektronička pošta





instagram viewer

"
 id="elektronička pošta"
 ime="elektronička pošta"
 rezervirano mjesto="[email protected]"
 [(ngModel)]="email adresa"
/>

u .ts datoteka, email adresa varijabla je vezana za emailAddress iz obrasca.

adresa e-pošte: niz = ''; 

Kako postaviti ogledni obrazac u Angular aplikaciji

Izgradnjom osnovne aplikacije možete koristiti dvosmjerno povezivanje kako biste provjerili postoji li potencijalno korisničko ime.

1. Stvoriti nova aplikacija Angular.
2. Pokreni ng generirati komponentu naredba za stvaranje nove komponente. Ovo je mjesto gdje ćete pohraniti obrazac.

   ng generiranje obrasca za provjeru korisničkog imena komponente

3. Zamijenite sav kod u svom app.component.html datoteka sa sljedećim oznakama:

   <obrazac za provjeru korisničkog imena aplikacije></app-username-checker-form>

4. Dodajte sljedeći CSS u svoju novu komponentu .css datoteku koja se nalazi na obrazac za provjeru korisničkog imena.component.css, za stiliziranje obrasca:

   .kontejner {
    zaslon: savitljiv;
    poravnanje teksta: središte;
    justify-content: centar;
    align-items: center;
    visina: 100vh;
   }
   .kartica {
    širina: 50%;
    boja pozadine: breskvasta boja;
    granični radijus: 1rem;
    podstava: 1rem;
   }
   unos {
    granica: 3px čvrsta #1a659e;
    rubni radijus: 5px;
    visina: 50px;
    visina linije: normalna;
    boja: #1a659e;
    prikaz: blok;
    širina: 100%;
    veličina okvira: border-box;
    korisnik-Izaberi: auto;
    veličina fonta: 16px;
    ispuna: 0 6px;
    padding-left: 12px;
   }
   ulazni:usredotočenost {
    granica: 3px čvrsta #004e89;
   }
   .btn {
    prikaz: blok;
    obris: 0;
    kursor: pokazivač;
    granica: 2px čvrsta #1a659e;
    rubni radijus: 3px;
    boja: #F F F;
    pozadina: #1a659e;
    veličina fonta: 20px;
    težina slova: 600;
    line-height: 28px;
    ispuna: 12px 20px;
    širina: 100%;
    margin-top: 1rem;
   }
   .btn:lebdjeti {
    pozadina: #004e89;
    granica: #004e89;
   }
   .uspjeh {
    boja: #14ae83;
   }
   .pogreška {
    boja: #fd536d;
   }

5. Dodajte sljedeći CSS u src/styles.css za postavljanje obitelji fontova, pozadine i boja teksta cijele aplikacije:

   @uvezi url("https://fonts.googleapis.com/css2?family=Poppins: težina@300;400&prikaz=zamjena");
   tijelo {
    obitelj-fontova: "Poppins";
    boja pozadine: papayawhip;
    boja: #1a659e;
   }

6. Zamijenite kod u obrazac za provjeru korisničkog imena.component.html, za dodavanje obrasca za provjeru korisničkog imena:

   <div klasa="spremnik">
   <div klasa="kartica">
   <h1> Provjera korisničkog imena </h1>
   <oblik>
   <ulazni
    vrsta="tekst"
    id="Korisničko ime"
    ime="Korisničko ime"
    rezervirano mjesto="Unesite korisničko ime"
    />
   <gumb klasa="btn"> Uštedjeti </button>
   </form>
   </div>
   </div>

7. Pokrenite svoju aplikaciju pomoću naredbe ng serve u terminalu.

   ng poslužiti

8. Pogledajte svoju prijavu na http://localhost: 4200/.

Slanje podataka između HTML i TypeScript datoteka

Koristite dvosmjerno povezivanje za slanje podataka na vaš .ts datoteku i natrag na .html datoteka. To je moguće uz korištenje ngModel u obrascima ulazni oznake.

1. Uvezi FormsModule u app.module.ts datoteku i dodajte je u uvozi niz:

   uvoz {FormsModule} iz '@angular/forms';
   @NgModule({
   //...
    uvozi: [
   // ostali uvozi
    FormsModule
    ],
   //...
   })

2. Izjaviti a Korisničko ime varijabla klase u .ts datoteka, obrazac za provjeru korisničkog imena.component.ts:

   korisničko ime: niz = '';

3. U obrazac za provjeru korisničkog imena.component.html, dodati [(ngModel)] s Korisničko ime varijabla u ulaznoj oznaci. Ovo omogućuje dvosmjerno povezivanje, a sve što se upiše u unos korisničkog imena obrasca dodjeljuje se varijabli korisničkog imena u .ts datoteka.

   <ulazni
    vrsta="tekst"
    id="Korisničko ime"
    ime="Korisničko ime"
    rezervirano mjesto="Unesite korisničko ime"
    [(ngModel)]="Korisničko ime"
   />

4. Za testiranje ti se podaci šalju na .ts datoteku, stvorite a uštedjeti() metoda u obrazac za provjeru korisničkog imena.component.ts. Kada pošaljete obrazac, aplikacija će pozvati ovu funkciju.

   uštedjeti(): poništiti {
   konzola.log(ovaj.Korisničko ime);
   }

5. Dodajte ngPošalji direktiva prema
   oznake u obrazac za provjeru korisničkog imena.component.html, i pozovite metodu save().

   <obrazac (ngSubmit)="uštedjeti()">

6. Kada kliknete na gumb Spremi, uštedjeti() ispisat će vrijednost unesenu u polje za unos na konzolu. Konzolu možete vidjeti tijekom izvođenja pomoću razvojnih alata preglednika. Ako niste upoznati s DevTools preglednika ili pregledavanjem konzole, možete saznati više o kako koristiti Chrome DevTools.
7. Pošaljite Korisničko ime natrag na .html datoteka. Dodajte varijablu korisničkog imena između vitičastih zagrada u obrazac za provjeru korisničkog imena.component.html datoteka, nakon
   oznake. Koristite vitičaste zagrade za prikaz vrijednosti pohranjene u varijabli korisničkog imena.

   <h2 *ngIf="Korisničko ime"> Uneseno korisničko ime: {{ korisničko ime }} </h2>

   U obrascu bi trebali biti prikazani istovremeno uneseni podaci.
8. U obrazac za provjeru korisničkog imena.component.ts, dodajte neke varijable klase da provjerite postoji li korisničko ime već. Izjaviti a korisnička imena niz s nekoliko preuzetih korisničkih imena i dodajte a poruka string koji obavještava korisnika o provjeri. Varijabla isValidUsername vrijedi ako uneseno korisničko ime nije u nizu korisničkih imena.

   korisnička imena: niz[] = [ 'bart', 'lisa', 'pržiti', 'leela' ];
   poruka: niz = '';
   isValidUsername: Booleov = lažno;

9. The uštedjeti() metoda bi trebala provjeriti nalazi li se uneseno korisničko ime već u postojećem nizu korisničkih imena ili ne. Ovisno o ishodu, poruka će biti postavljena na odgovarajući način.

   uštedjeti(): poništiti {
    ako (ovo.korisničko ime != '') {
   ovaj.isValidUsername = !ovaj.korisnička imena.uključuje(
   ovaj.Korisničko ime.u mala slova()
    );
   ako (ovaj.isValidUsername) {
   ovaj.poruka = `Vaše novo korisničko ime je '${ovaj.Korisničko ime}'`;
    } drugo {
   ovaj.poruka = `Korisničko ime'${ovaj.Korisničko ime}' već je zauzeto`;
    }
    }
   }

10. Dovršiti obrazac za provjeru korisničkog imena.component.html datoteku pokazujući postoji li uneseno korisničko ime ili ne. Dodajte poruku o pogrešci ispod

    oznake nakon obrasca. The isValidUsername varijabla je ovdje korisna za određivanje boje prikazane poruke.

    <p *ngIf="Korisničko ime" [ngClass]="isValidUsername? 'uspjeh': 'greška'">
     {{ poruka }}
    </str>

11. U vašem pregledniku na lokalni host: 4200pokušajte unijeti korisničko ime koje postoji u nizu korisničkih imena: Zatim pokušajte unijeti korisničko ime koje nije.

Korištenje dvosmjernog povezivanja za slanje podataka prilikom razvoja aplikacije

Dvosmjerno uvezivanje korisno je za provjeru valjanosti, provjere, izračune i još mnogo toga. Omogućuje komponentama komunikaciju i dijeljenje podataka u stvarnom vremenu.

Značajke dvosmjernog povezivanja možete koristiti u različitim dijelovima aplikacije. Nakon što primite podatke od korisnika, možete izvršiti poslovnu logiku i obavijestiti korisnika o rezultatima.

Ponekad biste željeli pohraniti korisničke podatke u bazu podataka. Možete istražiti različite vrste pružatelja baza podataka koje možete koristiti, uključujući Firebase NoSQL bazu podataka.