Mis on kahesuunaline sidumine nurga all?

Kahesuunaline sidumine võimaldab kasutajatel sisestada andmeid HTML-failist ja saata need TypeScript-faili ja tagasi. See on kasulik sisendi valideerimiseks, manipuleerimiseks ja muuks.

Kui olete andmed HTML-ist TypeScript-faili edastanud, saate neid kasutada teatud äriloogika täiendamiseks. Näidisstsenaarium oleks see, kui soovite kontrollida, kas sisestusväljale sisestatud nimi on juba olemas.

Kuidas saate kasutada kahesuunalist sidumist?

Kahesuunaline sidumine Angular-rakendustes on tavaliselt määratud .html faili, kasutades ngModel direktiiv. Kahesuunaline sidumine sisendvormis võib välja näha umbes selline:

<sisend 
 tüüp="email"
 id="email"
 nimi ="email"
 kohatäide="[email protected]"
 [(ngModel)]="e-posti aadress"
/>

Aastal .ts fail, e-posti aadress muutuja on seotud vormis oleva e-posti aadressiga.

meiliaadress: String = ''; 

Kuidas seadistada nurgarakenduses näidisvormi

Põhirakenduse loomisel saate kahesuunalise sidumise abil kontrollida, kas potentsiaalne kasutajanimi on juba olemas.

1. Loo uus Angular rakendus.
2. Käivitage ng genereerida komponenti käsk uue komponendi loomiseks. Siin salvestate vormi.

   ng genereerida komponent kasutajanimi-kontrollija-vorm

3. Asendage kogu kood oma app.component.html fail järgmiste siltidega:

   <app-username-checker-vorm></app-username-checker-form>

4. Lisage oma uude komponenti järgmine CSS .css fail, mis asub aadressil kasutajanimi-checker-form.component.css, vormi stiilimiseks:

   .konteiner {
    ekraan: flex;
    teksti joondamine: keskel;
    õigustama-sisu: keskpunkt;
    joonda-elemendid: keskel;
    kõrgus: 100vh;
   }
   .kaart {
    laius: 50%;
    taustavärv: virsikupuhv;
    piiri raadius: 1rem;
    polster: 1rem;
   }
   sisend {
    piir: 3px tahke #1a659e;
    piiri raadius: 5 pikslit;
    kõrgus: 50 pikslit;
    joone kõrgus: normaalne;
    värv: #1a659e;
    kuva: plokk;
    laius: 100%;
    box-sizing: border-box;
    kasutaja-vali: auto;
    fondi suurus: 16 pikslit;
    polsterdus: 0 6px;
    polster-vasak: 12px;
   }
   sisend:fookus {
    piir: 3px tahke #004e89;
   }
   .btn {
    kuva: plokk;
    ülevaade: 0;
    kursor: kursor;
    piir: 2px tahke #1a659e;
    piiri raadius: 3px;
    värv: #fff;
    taust: #1a659e;
    fondi suurus: 20 pikslit;
    fondi kaal: 600;
    rea kõrgus: 28 pikslit;
    polsterdus: 12px 20px;
    laius: 100%;
    margin-top: 1rem;
   }
   .btn:hõljuma {
    taust: #004e89;
    piir: #004e89;
   }
   .edu {
    värv: #14ae83;
   }
   .error {
    värv: #fd536d;
   }

5. Lisage järgmine CSS src/styles.css üldise rakenduse fondiperekonna, tausta ja tekstivärvide määramiseks:

   @import url("https://fonts.googleapis.com/css2?family=Poppins: wgh@300;400&kuva=vahetus");
   keha {
    font-perekond: "Poppins";
    taustavärv: papayawhip;
    värv: #1a659e;
   }

6. Asendage kood sisse kasutajanimi-checker-form.component.html, et lisada kasutajanime kontrollimise vorm:

   <div klass="konteiner">
   <div klass="kaardile">
   <h1> Kasutajanime kontrollija </h1>
   <vormi>
   <sisend
    tüüp="tekst"
    id="kasutajanimi"
    nimi ="kasutajanimi"
    kohatäide="Palun sisesta kasutajanimi"
    />
   <nupu klass="btn"> Salvesta </button>
   </form>
   </div>
   </div>

7. Käivitage rakendus, kasutades terminalis käsku ng serve.

   teenida

8. Vaadake oma taotlust aadressil http://localhost: 4200/.

Andmete saatmine HTML- ja TypeScript-failide vahel

Kasutage kahesuunalist sidumist andmete saatmiseks oma .ts faili ja tagasi .html faili. See on võimalik kasutades ngModel vormis sisend sildid.

1. Importige Vormide moodul sisse app.module.ts faili ja lisage see faili import massiiv:

   importida { FormsModule } alates '@nurk/vormid';
   @NgModule({
   //...
    import: [
   // muu import
    Vormide moodul
    ],
   //...
   })

2. Kuulutada a kasutajanimi klassi muutuja .ts fail, kasutajanimi-checker-form.component.ts:

   kasutajanimi: string = '';

3. sisse kasutajanimi-checker-form.component.html, lisama [(ngModel)] koos kasutajanimi muutuja sisendsildis. See võimaldab kahesuunalist sidumist ja kõik, mis on sisestatud vormi kasutajanime sisendisse, määratakse kasutajanime muutujale .ts faili.

   <sisend
    tüüp="tekst"
    id="kasutajanimi"
    nimi ="kasutajanimi"
    kohatäide="Palun sisesta kasutajanimi"
    [(ngModel)]="kasutajanimi"
   />

4. Nende testimiseks saadetakse andmed aadressile .ts fail, loo a salvesta () meetod sisse kasutajanimi-checker-form.component.ts. Kui esitate vormi, kutsub rakendus seda funktsiooni.

   salvesta (): tühine {
   konsool.log(see.kasutajanimi);
   }

5. Lisage ngEsita käskkiri
   sildid sisse kasutajanimi-checker-form.component.htmlja kutsuge meetod save().

   <vorm (ngSubmit)="salvesta ()">

6. Kui klõpsate nupul Salvesta, kuvatakse salvesta () funktsioon prindib sisestusväljale sisestatud väärtuse konsooli. Saate vaadata konsooli käitusajal, kasutades brauseri arendaja tööriistu. Kui te pole brauseriga DevTools või konsooli vaatamine tuttav, saate lisateavet kuidas kasutada Chrome DevToolsi.
7. Saada kasutajanimi tagasi .html faili. Lisage kasutajanime muutuja lokkis sulgude vahele kasutajanimi-checker-form.component.html faili pärast
   sildid. Kasutage kasutajanime muutujasse salvestatud väärtuse kuvamiseks lokkis sulgusid.

   <h2 *ngIf="kasutajanimi"> Sisestatud kasutajanimi: {{ kasutajanimi }} </h2>

   Vorm peaks näitama samaaegselt sisestatud andmeid.
8. sisse kasutajanimi-checker-form.component.ts, lisage mõned klassimuutujad, et kontrollida, kas kasutajanimi on juba olemas. Kuulutada a kasutajanimed massiivi mõne võetud kasutajanimega ja lisage a sõnum string, mis teavitab kasutajat kontrollist. Muutuja isValidUsername on tõene, kui sisestatud kasutajanimi pole kasutajanimede massiivis.

   kasutajanimed: string[] = [ 'bart', 'lisa', 'praadida', 'leela' ];
   sõnum: string = '';
   isValidUsername: tõeväärtus = vale;

9. The salvesta () meetod peaks kontrollima, kas sisestatud kasutajanimi on juba olemasolevas kasutajanimede massiivis või mitte. Olenevalt tulemusest seatakse sõnum vastavalt.

   salvesta (): tühine {
    if (see.kasutajanimi != '') {
   see.isValidUsername = !see.usernames.includes(
   see.kasutajanimi.to LowCase()
    );
   kui (see.isValidUsername) {
   see.message = "Teie uus kasutajanimi on"${see.username}'`;
    } muidu {
   see.message = `kasutajanimi'${see.username}"on juba võetud".;
    }
    }
   }

10. Täitke kasutajanimi-checker-form.component.html faili, näidates, kas sisestatud kasutajanimi on olemas või mitte. Lisage veateade all

    sildid pärast vormi. The isValidUsername muutuja on siin abiks kuvatava sõnumi värvi määramisel.

    <p *ngIf="kasutajanimi" [ngClass]="isValidUsername? 'edu': 'viga'">
     {{ sõnum }}
    </lk>

11. Oma brauseris aadressil kohalik host: 4200, proovige sisestada kasutajanimede massiivi kasutajanimi: Seejärel proovige sisestada kasutajanimi, mis seda ei tee.

Kahesuunalise sidumise kasutamine andmete saatmiseks rakenduse arendamisel

Kahesuunaline sidumine on kasulik valideerimiseks, kontrollimiseks, arvutusteks ja muuks. See võimaldab komponentidel reaalajas suhelda ja andmeid jagada.

Saate kasutada kahesuunalise sidumise funktsioone rakenduse erinevates osades. Kui olete kasutajalt andmed kätte saanud, saate käivitada äriloogika ja teavitada kasutajat tulemustest.

Mõnikord soovite salvestada kasutaja andmed andmebaasi. Saate uurida erinevat tüüpi andmebaasipakkujaid, mida saate kasutada, sealhulgas Firebase NoSQL andmebaasi.