Mi az a kétirányú kötés szögben?

A kétirányú kötés lehetővé teszi a felhasználók számára, hogy adatokat vigyenek be a HTML-fájlból, majd elküldjék azokat a TypeScript-fájlba, majd vissza. Ez hasznos a bemenet ellenőrzéséhez, manipulálásához és egyebekhez.

Miután átadta az adatokat a HTML-ből a TypeScript-fájlba, felhasználhatja az adatokat bizonyos üzleti logikák kiegészítésére. Egy példa az lenne, ha ellenőrizni szeretné, hogy a beviteli mezőben megadott név már létezik-e.

Hogyan használhatod a kétirányú kötést?

A kétirányú kötés az Angular alkalmazásokban általában a .html fájl segítségével a ngModel irányelv. A kétirányú kötés beviteli formában így nézhet ki:

<bemenet 
 típus="email"
 id="email"
 név="email"
 helyőrző="[email protected]"
 [(ngModel)]="email cím"
/>

Ban,-ben .ts fájl, a email cím változó az űrlap emailcíméhez van kötve.

emailcím: String = ''; 

Példaűrlap beállítása szögletes alkalmazásban

Egy alapalkalmazás elkészítésével kétirányú összerendeléssel ellenőrizheti, hogy létezik-e már potenciális felhasználónév.

1. Hozzon létre egy új Angular alkalmazás.
2. Futtassa a ng összetevőt generál parancsot új komponens létrehozásához. Itt fogja tárolni az űrlapot.

   ng generálja a felhasználónév-ellenőrző-űrlap összetevőt

3. Cserélje ki az összes kódot app.component.html fájl a következő címkékkel:

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

4. Adja hozzá a következő CSS-t az új összetevőjéhez .css fájl, melynek címe username-checker-form.component.css, az űrlap stílusához:

   .tartály {
    kijelző: flex;
    szöveg igazítása: középre;
    indokol-tartalom: center;
    align-ites: center;
    magasság: 100vh;
   }
   .kártya {
    szélesség: 50%;
    háttérszín: barackpuff;
    határsugár: 1 rem;
    párnázás: 1 rem;
   }
   input {
    határ: 3px tömör #1a659e;
    határsugár: 5 képpont;
    magasság: 50 képpont;
    vonalmagasság: normál;
    szín: #1a659e;
    kijelző: blokk;
    szélesség: 100%;
    box-sizing: border-box;
    felhasználó-válassza ki: auto;
    betűméret: 16 képpont;
    padding: 0 6px;
    padding-bal: 12px;
   }
   bemenet:fókusz {
    határ: 3px tömör #004e89;
   }
   .btn {
    kijelző: blokk;
    körvonal: 0;
    kurzor: pointer;
    határ: 2px tömör #1a659e;
    határsugár: 3 képpont;
    szín: #fff;
    háttér: #1a659e;
    betűméret: 20 képpont;
    betűsúly: 600;
    vonalmagasság: 28 képpont;
    padding: 12px 20px;
    szélesség: 100%;
    margó-felső: 1rem;
   }
   .btn:lebeg {
    háttér: #004e89;
    határ: #004e89;
   }
   .siker {
    szín: #14ae83;
   }
   .hiba {
    szín: #fd536d;
   }

5. Adja hozzá a következő CSS-t src/styles.css a betűtípuscsalád, a háttér és a szöveg színének beállításához a teljes alkalmazásban:

   @import url("https://fonts.googleapis.com/css2?family=Poppins: wgh@300;400&display=swap");
   body {
    betűtípus család: "Poppins";
    háttérszín: papayawhip;
    szín: #1a659e;
   }

6. Cserélje ki a kódot username-checker-form.component.html, a felhasználónév-ellenőrző űrlap hozzáadásához:

   <div class="tartály">
   <div class="kártya">
   <h1> Felhasználónév-ellenőrző </h1>
   <forma>
   <bemenet
    típus="szöveg"
    id="felhasználónév"
    név="felhasználónév"
    helyőrző="Kérjük, adjon meg egy felhasználónevet"
    />
   <gomb osztály="btn"> Megment </button>
   </form>
   </div>
   </div>

7. Futtassa az alkalmazást a terminál ng serve parancsával.

   ng szolgálni

8. Tekintse meg pályázatát a címen http://localhost: 4200/.

Adatok küldése a HTML és a TypeScript fájlok között

Használjon kétirányú kötést az adatok küldéséhez .ts fájlt és vissza a .html fájlt. Ez a használatával lehetséges ngModel a formában bemenet címkéket.

1. Importálja a FormsModule ba,-be app.module.ts fájlt, és adja hozzá a behozatal sor:

   import { FormsModule } tól től '@angular/forms';
   @NgModule({
   //...
    import: [
   // egyéb import
    FormsModule
    ],
   //...
   })

2. Nyilatkozni a felhasználónév osztályú változó a .ts fájl, username-checker-form.component.ts:

   felhasználónév: string = '';

3. Ban ben username-checker-form.component.html, add hozzá [(ngModel)] a... val felhasználónév változó a bemeneti címkében. Ez lehetővé teszi a kétirányú kötést, és minden, amit az űrlap felhasználónév bevitelébe írunk, a rendszer a felhasználónév változóhoz lesz rendelve. .ts fájlt.

   <bemenet
    típus="szöveg"
    id="felhasználónév"
    név="felhasználónév"
    helyőrző="Kérjük, adjon meg egy felhasználónevet"
    [(ngModel)]="felhasználónév"
   />

4. Az adatok teszteléséhez a rendszer a .ts fájlt, hozzon létre a megment() módszer be username-checker-form.component.ts. Az űrlap elküldésekor az alkalmazás meghívja ezt a funkciót.

   megment(): üres {
   konzol.log(ez.felhasználónév);
   }

5. Add hozzá a ngSubmit direktíva a
   címkék be username-checker-form.component.html, és hívja meg a save() metódust.

   <űrlap (ngSubmit)="megment()">

6. A Mentés gombra kattintva a megment() funkció kiírja a beviteli mezőbe beírt értéket a konzolra. A konzolt futás közben tekintheti meg a böngésző fejlesztői eszközeivel. Ha nem ismeri a böngésző DevTools-t vagy a konzol megtekintését, többet megtudhat hogyan kell használni a Chrome DevTools-t.
7. Küldje el a felhasználónév vissza a .html fájlt. Adja hozzá a felhasználónév változót a göndör zárójelek közé a username-checker-form.component.html fájl után a
   címkéket. Használjon zárójeleket a felhasználónév változóban tárolt érték megjelenítéséhez.

   <h2 *ngIf="felhasználónév"> Beírt felhasználónév: {{ felhasználónév }} </h2>

   Az űrlapon az egyidejűleg bevitt adatoknak kell megjelenniük.
8. Ban ben username-checker-form.component.ts, adjon hozzá néhány osztályváltozót, hogy ellenőrizze, létezik-e már a felhasználónév. Nyilatkozni a felhasználónevek tömböt néhány felvett felhasználónévvel, és add hozzá a üzenet karakterlánc, amely tájékoztatja a felhasználót a csekkről. A változó isValidUsername igaz, ha a megadott felhasználónév nem szerepel a felhasználónevek tömbjében.

   felhasználónevek: string[] = [ 'bart', 'Lisa', 'süt', 'leela' ];
   üzenet: string = '';
   isValidUsername: logikai érték = hamis;

9. A megment() metódusnak ellenőriznie kell, hogy a megadott felhasználónév szerepel-e már a meglévő felhasználónevek tömbjében vagy sem. Az eredménytől függően az üzenet ennek megfelelően kerül beállításra.

   megment(): üres {
    if (ez.felhasználónév != '') {
   ez.isValidUsername = !ez.usernames.includes(
   ez.felhasználónév.to LowCase()
    );
   ha (ez.isValidUsername) {
   ez.message = `Az új felhasználóneved:${ez.felhasználónév}'`;
    } más {
   ez.message = "A felhasználónév"${ez.felhasználónév}"már elfoglalták".;
    }
    }
   }

10. Befejezni a username-checker-form.component.html fájlba, megmutatva, hogy a megadott felhasználónév létezik-e vagy sem. Adjon hozzá egy hibaüzenetet a

    címkéket az űrlap után. A isValidUsername változó itt segít meghatározni a megjelenített üzenet színét.

    <p *ngIf="felhasználónév" [ngClass]="isValidUsername? 'siker': 'hiba'">
     {{ üzenet }}
    </p>

11. A böngészőben a címen localhost: 4200, próbáljon meg olyan felhasználónevet megadni, amely a felhasználónevek tömbjében található: Ezután próbáljon meg olyan felhasználónevet megadni, amely nem.

Kétirányú kötés használata adatküldésre egy alkalmazás fejlesztése során

A kétirányú kötés hasznos az érvényesítéshez, ellenőrzésekhez, számításokhoz és egyebekhez. Lehetővé teszi az összetevők valós időben történő kommunikációját és adatmegosztását.

A kétirányú kötés funkcióit az alkalmazás különböző részein használhatja. Miután megkapta az adatokat a felhasználótól, végrehajthatja az üzleti logikát, és tájékoztathatja a felhasználót az eredményekről.

Néha érdemes a felhasználó adatait adatbázisban tárolni. Fedezze fel a különböző típusú adatbázis-szolgáltatókat, amelyeket használhat, beleértve a Firebase NoSQL-adatbázist.