Vad är tvåvägsbindning i Angular?

Tvåvägsbindning tillåter användare att mata in data från HTML-filen och skicka den till TypeScript-filen och tillbaka. Detta är användbart för indatavalidering, manipulation och mer.

När du skickar data från HTML till TypeScriptfilen kan du använda data för att slutföra viss affärslogik. Ett exempelscenario skulle vara om du vill kontrollera om namnet som skrivits in i ett inmatningsfält redan existerade.

Hur kan du använda tvåvägsbindning?

Tvåvägsbindning i Angular-appar ställs vanligtvis in i .html fil, med hjälp av ngModell direktiv. Tvåvägsbindning i en inmatningsform kan se ut ungefär så här:

<inmatning 
 typ="e-post"
 id="e-post"
 namn="e-post"
 platshållare="[email protected]"
 [(ngModel)]="e-postadress"
/>

I den .ts fil, den e-postadress variabeln är bunden till e-postadressen från formuläret.

e-postadress: String = ''; 

Hur man ställer in ett exempelformulär i en vinkelapp

Genom att bygga en grundläggande app kan du använda tvåvägsbindning för att kontrollera om ett potentiellt användarnamn redan finns.

1. Skapa en nya Angular-appen.
2. Springa det ng generera komponent kommando för att skapa en ny komponent. Det är här du kommer att lagra formuläret.

   ng generera komponent användarnamn-checker-form

3. Byt ut all kod i din app.component.html fil med följande taggar:

   <app-användarnamn-checker-form></app-username-checker-form>

4. Lägg till följande CSS i din nya komponent .css fil, som finns på användarnamn-checker-form.component.css, för att utforma formuläret:

   .behållare {
    display: flex;
    text-align: center;
    motivera-innehåll: center;
    align-items: center;
    höjd: 100vh;
   }
   .kort {
    bredd: 50%;
    bakgrundsfärg: peachpuff;
    gräns-radie: 1rem;
    stoppning: 1rem;
   }
   inmatning {
    gräns: 3px fast #1a659e;
    border-radie: 5px;
    höjd: 50px;
    linjehöjd: normal;
    Färg: #1a659e;
    display: block;
    bredd: 100%;
    box-storlek: border-box;
    användare-Välj: bil;
    teckenstorlek: 16px;
    stoppning: 0 6px;
    padding-vänster: 12px;
   }
   inmatning:fokus {
    gräns: 3px fast #004e89;
   }
   .btn {
    display: block;
    disposition: 0;
    markör: pekare;
    gräns: 2px fast #1a659e;
    border-radie: 3px;
    Färg: #fff;
    bakgrund: #1a659e;
    teckensnittsstorlek: 20px;
    teckensnittsvikt: 600;
    linjehöjd: 28px;
    stoppning: 12px 20px;
    bredd: 100%;
    marginal-top: 1rem;
   }
   .btn:sväva {
    bakgrund: #004e89;
    gräns: #004e89;
   }
   .Framgång {
    Färg: #14ae83;
   }
   .fel {
    Färg: #fd536d;
   }

5. Lägg till följande CSS i src/styles.css för att ställa in teckensnittsfamiljen, bakgrunden och textfärgerna för den övergripande appen:

   @import url("https://fonts.googleapis.com/css2?family=Poppins: wght@300;400&display=byte");
   kropp {
    typsnittsfamilj: "Poppins";
    bakgrundsfärg: papayawhip;
    Färg: #1a659e;
   }

6. Byt ut koden i username-checker-form.component.html, för att lägga till formuläret för användarnamnskontroll:

   <div klass="behållare">
   <div klass="kort">
   <h1> Användarnamn Checker </h1>
   <form>
   <inmatning
    typ="text"
    id="Användarnamn"
    namn="Användarnamn"
    platshållare="var vänlig ange ett användarnamn"
    />
   <knappklass="btn"> Spara </button>
   </form>
   </div>
   </div>

7. Kör din app med kommandot ng serve i terminalen.

   ng tjäna

8. Se din ansökan på http://localhost: 4200/.

Skicka data mellan HTML- och TypeScript-filerna

Använd tvåvägsbindning för att skicka data till din .ts fil och tillbaka till .html fil. Detta är möjligt med användning av ngModell i formulärets inmatning taggar.

1. Importera FormsModule in i app.modul.ts filen och lägg till den i import array:

   importera { FormsModule } från '@angular/former';
   @NgModule({
   //...
    importer: [
   // annan import
    FormsModule
    ],
   //...
   })

2. Deklarera a Användarnamn klassvariabel i .ts fil, användarnamn-checker-form.component.ts:

   användarnamn: string = '';

3. I username-checker-form.component.html, Lägg till [(ngModel)] med Användarnamn variabel i inmatningstaggen. Detta möjliggör tvåvägsbindning, och allt som skrivs in i formulärets användarnamnsinmatning tilldelas användarnamnsvariabeln i .ts fil.

   <inmatning
    typ="text"
    id="Användarnamn"
    namn="Användarnamn"
    platshållare="var vänlig ange ett användarnamn"
    [(ngModel)]="Användarnamn"
   />

4. För att testa att data skickas till .ts fil, skapa en spara() metod i användarnamn-checker-form.component.ts. När du skickar in formuläret anropar ansökan denna funktion.

   spara(): tomhet {
   trösta.logga(detta.Användarnamn);
   }

5. Lägg till ngSkicka in direktiv till
   taggar in username-checker-form.component.html, och anropa metoden save().

   <form (ngSubmit)="spara()">

6. När du klickar på knappen Spara visas spara() funktionen kommer att skriva ut värdet som anges i inmatningsfältet till konsolen. Du kan se konsolen under körning med webbläsarens utvecklarverktyg. Om du inte är bekant med webbläsarens DevTools eller tittar på konsolen kan du lära dig mer om hur du använder Chrome DevTools.
7. Skicka Användarnamn tillbaka till .html fil. Lägg till användarnamnsvariabeln mellan hakparenteser till username-checker-form.component.html fil, efter
   taggar. Använd parenteser för att visa värdet som är lagrat i användarnamnsvariabeln.

   <h2 *ngIf="Användarnamn"> Användarnamn angett: {{ användarnamn }} </h2>

   Formuläret ska visa de inmatade uppgifterna samtidigt.
8. I användarnamn-checker-form.component.ts, lägg till några klassvariabler för att kontrollera om användarnamnet redan finns. Deklarera a användarnamn array med några tagna användarnamn och lägg till en meddelande sträng som informerar användaren om checken. Variabeln isValidUsername är sant om det angivna användarnamnet inte finns i användarnamnsmatrisen.

   användarnamn: string[] = [ 'bart', 'lisa', 'fritera', 'leela' ];
   meddelande: string = '';
   isValidUsername: booleskt = falsk;

9. De spara() metod bör kontrollera om det angivna användarnamnet redan finns i den befintliga användarnamnsmatrisen eller inte. Beroende på resultatet kommer meddelandet att ställas in därefter.

   spara(): tomhet {
    if (detta.användarnamn != '') {
   detta.isValidUsername = !detta.användarnamn.inkluderar(
   detta.Användarnamn.toLowerCase()
    );
   om (detta.isValidUsername) {
   detta.meddelande = "Ditt nya användarnamn är"${detta.Användarnamn}'`;
    } annan {
   detta.meddelande = `Användarnamnet'${detta.Användarnamn}"har redan tagits".;
    }
    }
   }

10. Slutför username-checker-form.component.html fil genom att visa om det angivna användarnamnet finns eller inte. Lägg till ett felmeddelande under

    taggar efter formuläret. De isValidUsername variabeln är användbar här för att bestämma färgen på meddelandet som visas.

    <p *ngIf="Användarnamn" [ngClass]="är ValidUsername? 'Framgång': 'fel'">
     {{ meddelande }}
    </s>

11. I din webbläsare på lokal värd: 4200, försök att ange ett användarnamn som finns i användarnamnsmatrisen: Försök sedan att ange ett användarnamn som inte gör det.

Använda tvåvägsbindning för att skicka data när du utvecklar en applikation

Tvåvägsbindning är användbar för validering, kontroller, beräkningar och mer. Det tillåter komponenter att kommunicera och dela data i realtid.

Du kan använda funktioner för tvåvägsbindning i olika delar av en app. När du har fått data från användaren kan du köra affärslogik och informera användaren om resultaten.

Ibland skulle du vilja lagra användarens data i en databas. Du kan utforska olika typer av databasleverantörer du kan använda, inklusive Firebase NoSQL Database.