Čo je obojsmerná väzba v Angular?

Obojsmerná väzba umožňuje používateľom zadávať údaje zo súboru HTML a odosielať ich do súboru TypeScript a späť. Je to užitočné pri overovaní vstupu, manipulácii a podobne.

Po odovzdaní údajov z HTML do TypeScriptfile môžete tieto údaje použiť na dokončenie určitej obchodnej logiky. Príkladom by bolo, keby ste chceli skontrolovať, či názov zadaný do vstupného poľa už existuje.

Ako môžete použiť obojsmernú väzbu?

Obojsmerná väzba v aplikáciách Angular je zvyčajne nastavená v .html pomocou súboru ngModel smernice. Obojsmerná väzba vo vstupnom formulári môže vyzerať takto:

<vstup 
 typ="e-mailom"
 id="e-mailom"
 meno="e-mailom"
 zástupný symbol ="[email protected]"
 [(ngModel)]="emailová adresa"
/>

V .ts súbor, emailová adresa premenná je naviazaná na emailAddress z formulára.

emailAddress: String = ''; 

Ako nastaviť vzorový formulár v aplikácii Angular

Vytvorením základnej aplikácie môžete pomocou obojsmernej väzby skontrolovať, či už existuje potenciálne používateľské meno.

1. Vytvor nová aplikácia Angular.
2. Spustite ng generovať komponent príkaz na vytvorenie nového komponentu. Tu uložíte formulár.

   vygenerujte komponent username-checker-form

3. Nahraďte celý kód vo svojom app.component.html súbor s nasledujúcimi značkami:

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

4. Pridajte nasledujúci CSS do svojho nového komponentu .css súbor, ktorý sa nachádza na adrese username-checker-form.component.css, na úpravu formulára:

   .kontajner {
    displej: flex;
    text-align: center;
    zdôvodniť-obsah: stred;
    align-items: center;
    výška: 100vh;
   }
   .karta {
    šírka: 50 %;
    farba pozadia: broskyňová;
    border-radius: 1rem;
    polstrovanie: 1rem;
   }
   vstup {
    hranica: 3px pevné #1a659e;
    border-radius: 5px;
    výška: 50px;
    výška riadku: normálna;
    farba: #1a659e;
    displej: blok;
    šírka: 100 %;
    box-sizing: border-box;
    užívateľ-vyberte: auto;
    veľkosť písma: 16px;
    výplň: 0 6px;
    padding-left: 12px;
   }
   vstup:zamerajte sa {
    hranica: 3px pevné #004e89;
   }
   .btn {
    displej: blok;
    obrys: 0;
    kurzor: ukazovateľ;
    hranica: 2px pevné #1a659e;
    border-radius: 3px;
    farba: #fff;
    pozadie: #1a659e;
    veľkosť písma: 20px;
    váha písma: 600;
    line-height: 28px;
    výplň: 12px 20px;
    šírka: 100 %;
    okraj-vrchol: 1rem;
   }
   .btn:vznášať sa {
    pozadie: #004e89;
    hranica: #004e89;
   }
   .úspech {
    farba: #14ae83;
   }
   .chyba {
    farba: #fd536d;
   }

5. Pridajte nasledujúci CSS do src/styles.css na nastavenie rodiny písiem, pozadia a farieb textu celej aplikácie:

   @import url("https://fonts.googleapis.com/css2?family=Poppins: hmotn.@300;400&display=swap");
   telo {
    rodina písiem: "Poppins";
    farba pozadia: papayawhip;
    farba: #1a659e;
   }

6. Nahraďte kód v username-checker-form.component.html, na pridanie formulára na kontrolu používateľského mena:

   <trieda div="kontajner">
   <trieda div="kartu">
   <h1> Kontrola používateľského mena </h1>
   <formulár>
   <vstup
    typ="text"
    id="užívateľské meno"
    meno="užívateľské meno"
    zástupný symbol ="Zadajte používateľské meno"
    />
   <trieda tlačidiel="btn"> Uložiť </button>
   </form>
   </div>
   </div>

7. Spustite svoju aplikáciu pomocou príkazu ng serve v termináli.

   ng slúžiť

8. Pozrite si svoju žiadosť na http://localhost: 4200/.

Posielanie údajov medzi súbormi HTML a TypeScript

Na odoslanie údajov do vášho zariadenia použite obojsmernú väzbu .ts súbor a späť na .html súbor. To je možné s použitím ngModel vo formulári vstup značky.

1. Importovať FormsModule do app.module.ts a pridajte ho do súboru dovoz pole:

   importovať { FormsModule } od '@angular/forms';
   @NgModule({
   //...
    dovoz: [
   // iný dovoz
    FormsModule
    ],
   //...
   })

2. Vyhlásiť a užívateľské meno premenná triedy v .ts súbor, username-checker-form.component.ts:

   užívateľské meno: string = '';

3. In username-checker-form.component.html, pridajte [(ngModel)] s užívateľské meno premenná vo vstupnom tagu. To umožňuje obojsmernú väzbu a všetko, čo zadáte do vstupu používateľského mena formulára, sa priradí k premennej používateľského mena v .ts súbor.

   <vstup
    typ="text"
    id="užívateľské meno"
    meno="užívateľské meno"
    zástupný symbol ="Zadajte používateľské meno"
    [(ngModel)]="užívateľské meno"
   />

4. Ak chcete otestovať, že údaje sa odosielajú do .ts súbor, vytvorte a uložiť () metóda v username-checker-form.component.ts. Keď odošlete formulár, aplikácia zavolá túto funkciu.

   uložiť (): neplatné {
   konzoly.log(toto.používateľské meno);
   }

5. Pridajte ngOdoslať smernicu k
   značky v username-checker-form.component.htmla zavolajte metódu save().

   <formulár (ngSubmit)="uložiť ()">

6. Po kliknutí na tlačidlo Uložiť sa zobrazí uložiť () funkcia vytlačí hodnotu zadanú do vstupného poľa do konzoly. Konzolu môžete zobraziť za behu pomocou vývojárskych nástrojov prehliadača. Ak nie ste oboznámení s nástrojmi DevTools prehliadača alebo s prezeraním konzoly, môžete sa dozvedieť viac ako používať Chrome DevTools.
7. Pošlite užívateľské meno späť k .html súbor. Pridajte premennú používateľského mena medzi zložené zátvorky do username-checker-form.component.html súbor, po
   značky. Na zobrazenie hodnoty uloženej v premennej používateľského mena použite zložené zátvorky.

   <h2 *ngIf="užívateľské meno"> Zadané používateľské meno: {{ používateľské meno }} </h2>

   Vo formulári by sa mali zobrazovať súčasne zadané údaje.
8. In username-checker-form.component.ts, pridajte nejaké premenné triedy, aby ste skontrolovali, či už používateľské meno existuje. Vyhlásiť a používateľské mená pole s niekoľkými prevzatými používateľskými menami a pridajte a správu reťazec, ktorý informuje užívateľa o kontrole. Premenná isValidUsername je pravda, ak zadané používateľské meno nie je v poli používateľských mien.

   používateľské mená: reťazec[] = [ 'bart', 'lisa', 'smažiť', 'leela' ];
   správa: reťazec = '';
   isValidUsername: boolovská hodnota = falošný;

9. The uložiť () metóda by mala skontrolovať, či zadané používateľské meno je už v existujúcom poli používateľských mien alebo nie. V závislosti od výsledku sa príslušne nastaví správa.

   uložiť (): neplatné {
    if (toto.používateľské meno != '') {
   toto.isValidUsername = !toto.usernames.includes(
   toto.používateľské meno.na malé písmená()
    );
   ak (toto.isValidUsername) {
   toto.správa = 'Vaše nové používateľské meno je'${toto.username}'`;
    } inak {
   toto.správa = 'používateľské meno'${toto.username}'už bola prijatá';
    }
    }
   }

10. Dokončiť username-checker-form.component.html súbor zobrazením, či zadané používateľské meno existuje alebo nie. Pridajte chybové hlásenie pod

    značky za formulárom. The isValidUsername premenná je tu užitočná na určenie farby zobrazenej správy.

    <p *ngIf="užívateľské meno" [ngClass]="isValidUsername? 'úspech': 'chyba'">
     {{ správa }}
    </str>

11. Vo svojom prehliadači na adrese localhost: 4200, skúste zadať používateľské meno, ktoré existuje v poli používateľských mien: Potom sa pokúste zadať používateľské meno, ktoré nie.

Použitie obojsmernej väzby na odosielanie údajov pri vývoji aplikácie

Obojsmerná väzba je užitočná pri overovaní, kontrolách, výpočtoch a podobne. Umožňuje komponentom komunikovať a zdieľať dáta v reálnom čase.

Funkcie obojsmernej väzby môžete použiť v rôznych častiach aplikácie. Po prijatí údajov od používateľa môžete spustiť obchodnú logiku a informovať používateľa o výsledkoch.

Niekedy by ste chceli uložiť údaje používateľa do databázy. Môžete preskúmať rôzne typy poskytovateľov databáz, ktorých môžete použiť, vrátane databázy Firebase NoSQL.