Co je obousměrná vazba v Angular?

Obousměrná vazba umožňuje uživatelům vkládat data ze souboru HTML a odesílat je do souboru TypeScript a zpět. To je užitečné pro ověření vstupu, manipulaci a další.

Jakmile předáte data z HTML do TypeScriptfile, můžete data použít k dokončení určité obchodní logiky. Příkladem může být situace, kdy byste chtěli zkontrolovat, zda název zadaný do vstupního pole již existuje.

Jak můžete použít dvoucestné vázání?

Obousměrná vazba v aplikacích Angular je obvykle nastavena v .html pomocí souboru ngModel směrnice. Obousměrná vazba ve vstupním formuláři může vypadat nějak takto:

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

V .ts soubor, emailová adresa proměnná je vázána na emailAddress z formuláře.

emailAddress: String = ''; 

Jak nastavit vzorový formulář v aplikaci Angular

Vytvořením základní aplikace můžete použít obousměrnou vazbu ke kontrole, zda již existuje potenciální uživatelské jméno.

1. Vytvořit nová aplikace Angular.
2. Spusťte ng generovat komponentu příkaz k vytvoření nové komponenty. Zde uložíte formulář.

   vygenerujte komponentu username-checker-form

3. Nahraďte veškerý kód ve svém app.component.html soubor s následujícími značkami:

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

4. Přidejte následující CSS do své nové komponenty .css soubor, umístěný na username-checker-form.component.css, pro stylizaci formuláře:

   .kontejner {
    displej: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    výška: 100vh;
   }
   .Kartu {
    šířka: 50 %;
    barva pozadí: broskvová;
    border-radius: 1rem;
    polstrování: 1rem;
   }
   vstup {
    okraj: 3px pevné #1a659e;
    border-radius: 5px;
    výška: 50px;
    výška řádku: normální;
    barva: #1a659e;
    displej: blok;
    šířka: 100 %;
    box-sizing: border-box;
    uživatel-vybrat: auto;
    velikost písma: 16px;
    výplň: 0 6px;
    padding-left: 12px;
   }
   vstup:soustředit se {
    okraj: 3px pevné #004e89;
   }
   .btn {
    displej: blok;
    obrys: 0;
    kurzor: ukazatel;
    okraj: 2px pevné #1a659e;
    border-radius: 3px;
    barva: #fff;
    Pozadí: #1a659e;
    velikost písma: 20px;
    váha písma: 600;
    line-height: 28px;
    odsazení: 12px 20px;
    šířka: 100 %;
    margin-top: 1rem;
   }
   .btn:vznášet se {
    Pozadí: #004e89;
    okraj: #004e89;
   }
   .úspěch {
    barva: #14ae83;
   }
   .chyba {
    barva: #fd536d;
   }

5. Přidejte následující CSS do src/styles.css pro nastavení rodiny písem, pozadí a barev textu celé aplikace:

   @importovat url("https://fonts.googleapis.com/css2?family=Poppins: hmotn.@300;400&display=swap");
   tělo {
    rodina písem: "Poppins";
    barva pozadí: papayawhip;
    barva: #1a659e;
   }

6. Nahraďte kód v username-checker-form.component.html, pro přidání formuláře pro kontrolu uživatelského jména:

   <třída div="kontejner">
   <třída div="Kartu">
   <h1> Kontrola uživatelského jména </h1>
   <formulář>
   <vstup
    typ="text"
    id="uživatelské jméno"
    jméno="uživatelské jméno"
    zástupný symbol="Zadejte uživatelské jméno"
    />
   <třída tlačítka="btn"> Uložit </button>
   </form>
   </div>
   </div>

7. Spusťte aplikaci pomocí příkazu ng serve v terminálu.

   ng sloužit

8. Prohlédněte si svou přihlášku na http://localhost: 4200/.

Odesílání dat mezi soubory HTML a TypeScript

Použijte obousměrnou vazbu k odeslání dat do vašeho .ts souboru a zpět do .html soubor. To je možné s použitím ngModel ve formuláři vstup značky.

1. Importujte FormsModule do app.module.ts a přidejte jej do souboru dovozy pole:

   import { FormsModule } z '@angular/forms';
   @NgModule({
   //...
    dovoz: [
   // další importy
    FormsModule
    ],
   //...
   })

2. Prohlásit a uživatelské jméno proměnná třídy v .ts soubor, username-checker-form.component.ts:

   uživatelské jméno: string = '';

3. v username-checker-form.component.html, přidat [(ngModel)] s uživatelské jméno proměnné ve vstupní značce. To umožňuje obousměrnou vazbu a vše, co zadáte do vstupu uživatelského jména formuláře, bude přiřazeno k proměnné uživatelského jména v .ts soubor.

   <vstup
    typ="text"
    id="uživatelské jméno"
    jméno="uživatelské jméno"
    zástupný symbol="Zadejte uživatelské jméno"
    [(ngModel)]="uživatelské jméno"
   />

4. Chcete-li otestovat, že data jsou odesílána do .ts soubor, vytvořte a Uložit() metoda v username-checker-form.component.ts. Když odešlete formulář, aplikace tuto funkci zavolá.

   Uložit(): prázdnota {
   řídicí panel.log(tento.uživatelské jméno);
   }

5. Přidat ng Odeslat směrnice k
   značky v username-checker-form.component.htmla zavolejte metodu save().

   <formulář (ngSubmit)="Uložit()">

6. Po kliknutí na tlačítko Uložit se zobrazí Uložit() funkce vytiskne hodnotu zadanou do vstupního pole do konzole. Konzolu můžete zobrazit za běhu pomocí vývojářských nástrojů prohlížeče. Pokud nejste obeznámeni s nástroji DevTools prohlížeče nebo prohlížením konzole, můžete se dozvědět více o jak používat Chrome DevTools.
7. Poslat uživatelské jméno zpět k .html soubor. Přidejte proměnnou uživatelského jména mezi složené závorky do username-checker-form.component.html souboru, po
   značky. Použijte složené závorky k zobrazení hodnoty uložené v proměnné uživatelské jméno.

   <h2 *ngIf="uživatelské jméno"> Zadané uživatelské jméno: {{ uživatelské jméno }} </h2>

   Formulář by měl zobrazovat souběžně zadané údaje.
8. v username-checker-form.component.ts, přidejte nějaké proměnné třídy, abyste zkontrolovali, zda uživatelské jméno již existuje. Prohlásit a uživatelská jména pole s několika převzatými uživatelskými jmény a přidejte a zpráva řetězec, který informuje uživatele o kontrole. Proměnná isValidUsername je pravda, pokud zadané uživatelské jméno není v poli uživatelských jmen.

   uživatelská jména: string[] = [ 'bart', 'lisa', 'potěr', 'leela' ];
   zpráva: řetězec = '';
   isValidUsername: booleovský = Nepravdivé;

9. The Uložit() metoda by měla zkontrolovat, zda zadané uživatelské jméno je již v existujícím poli uživatelských jmen nebo ne. V závislosti na výsledku bude odpovídajícím způsobem nastavena zpráva.

   Uložit(): prázdnota {
    if (toto.uživatelské jméno != '') {
   tento.isValidUsername = !tento.usernames.includes(
   tento.uživatelské jméno.toLowerCase()
    );
   -li (tento.isValidUsername) {
   tento.zpráva = 'Vaše nové uživatelské jméno je'${tento.username}'`;
    } jiný {
   tento.zpráva = 'Uživatelské jméno'${tento.username}'už bylo přijato';
    }
    }
   }

10. Dokončit username-checker-form.component.html soubor zobrazením, zda zadané uživatelské jméno existuje nebo ne. Přidejte chybovou zprávu pod

    značky za formulářem. The isValidUsername je zde užitečná pro určení barvy zobrazené zprávy.

    <p *ngIf="uživatelské jméno" [ngClass]="isValidUsername? 'úspěch': 'chyba'">
     {{ zpráva }}
    </str>

11. Ve vašem prohlížeči na adrese localhost: 4200, pokuste se zadat uživatelské jméno, které existuje v poli uživatelských jmen: Potom se pokuste zadat uživatelské jméno, které ne.

Použití obousměrné vazby k odesílání dat při vývoji aplikace

Obousměrná vazba je užitečná pro ověřování, kontroly, výpočty a další. Umožňuje komponentám komunikovat a sdílet data v reálném čase.

Funkce obousměrné vazby můžete používat v různých částech aplikace. Jakmile od uživatele obdržíte data, můžete spustit obchodní logiku a informovat uživatele o výsledcích.

Někdy budete chtít uložit data uživatele do databáze. Můžete prozkoumat různé typy poskytovatelů databází, které můžete použít, včetně databáze Firebase NoSQL.