Hvad er to-vejs binding i vinkel?

To-vejs binding giver brugerne mulighed for at indtaste data fra HTML-filen og sende dem til TypeScript-filen og tilbage. Dette er nyttigt til inputvalidering, manipulation og mere.

Når du har videregivet data fra HTML til TypeScript-filen, kan du bruge dataene til at fuldføre en bestemt forretningslogik. Et eksempel på scenarie ville være, hvis du ville kontrollere, om navnet, der er indtastet i et inputfelt, allerede eksisterede.

Hvordan kan du bruge to-vejs binding?

To-vejs binding i Angular apps er normalt indstillet i .html fil ved hjælp af ngModel direktiv. Tovejsbinding i en inputform kan se sådan ud:

<input 
 type="e-mail"
 id="e-mail"
 navn="e-mail"
 pladsholder="[email protected]"
 [(ngModel)]="email adresse"
/>

I den .ts fil, den email adresse variabel er bundet til e-mailadressen fra formularen.

e-mailadresse: String = ''; 

Sådan opsætter du en eksempelformular i en vinkelapp

Ved at bygge en grundlæggende app kan du bruge tovejsbinding til at kontrollere, om et potentielt brugernavn allerede eksisterer.

1. Lave en ny Angular app.
2. Kør ng generere komponent kommando for at oprette en ny komponent. Det er her du gemmer formularen.

   ng generere komponent brugernavn-tjek-formular

3. Udskift al koden i din app.component.html fil med følgende tags:

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

4. Tilføj følgende CSS til din nye komponent .css fil, placeret på brugernavn-checker-form.component.css, for at style formularen:

   .beholder {
    display: flex;
    tekst-align: center;
    retfærdiggøre-indhold: center;
    align-items: center;
    højde: 100vh;
   }
   .kort {
    bredde: 50%;
    baggrundsfarve: peachpuff;
    grænse-radius: 1rem;
    polstring: 1rem;
   }
   input {
    grænse: 3px solid #1a659e;
    kant-radius: 5px;
    højde: 50px;
    linje-højde: normal;
    farve: #1a659e;
    display: blok;
    bredde: 100%;
    box-sizing: border-box;
    bruger-Vælg: auto;
    skriftstørrelse: 16px;
    polstring: 0 6px;
    polstring-venstre: 12px;
   }
   input:fokus {
    grænse: 3px solid #004e89;
   }
   .btn {
    display: blok;
    disposition: 0;
    markør: pointer;
    grænse: 2px solid #1a659e;
    kant-radius: 3px;
    farve: #fff;
    baggrund: #1a659e;
    skriftstørrelse: 20px;
    skrifttype-vægt: 600;
    linjehøjde: 28px;
    polstring: 12px 20px;
    bredde: 100%;
    margin-top: 1rem;
   }
   .btn:hover {
    baggrund: #004e89;
    grænse: #004e89;
   }
   .succes {
    farve: #14ae83;
   }
   .fejl {
    farve: #fd536d;
   }

5. Tilføj følgende CSS til src/styles.css for at indstille skrifttypefamilien, baggrunden og tekstfarverne for den overordnede app:

   @import url("https://fonts.googleapis.com/css2?family=Poppins: wght@300;400&display=bytte");
   krop {
    skrifttype-familie: "Poppins";
    baggrundsfarve: papayapisk;
    farve: #1a659e;
   }

6. Udskift koden i brugernavn-checker-form.component.html, for at tilføje brugernavnskontrolformularen:

   <div klasse="beholder">
   <div klasse="kort">
   <h1> Brugernavn Checker </h1>
   <form>
   <input
    type="tekst"
    id="brugernavn"
    navn="brugernavn"
    pladsholder="Indtast venligst et brugernavn"
    />
   <knapklasse="btn"> Gemme </button>
   </form>
   </div>
   </div>

7. Kør din app ved at bruge kommandoen ng serve i terminalen.

   ng tjene

8. Se din ansøgning på http://localhost: 4200/.

Afsendelse af data mellem HTML- og TypeScript-filerne

Brug tovejsbinding til at sende data til din .ts fil og tilbage til .html fil. Dette er muligt ved brug af ngModel i formularens input tags.

1. Importer FormsModule ind i app.modul.ts fil, og føj den til import array:

   importere { FormsModule } fra '@angular/former';
   @NgModule({
   //...
    import: [
   // anden import
    FormsModule
    ],
   //...
   })

2. Erklære en brugernavn klassevariabel i .ts fil, brugernavn-checker-form.component.ts:

   brugernavn: string = '';

3. I brugernavn-checker-form.component.html, tilføje [(ngModel)] med brugernavn variabel i input-tagget. Dette muliggør tovejsbinding, og alt, der indtastes i formularens brugernavninput, tildeles brugernavnvariablen i .ts fil.

   <input
    type="tekst"
    id="brugernavn"
    navn="brugernavn"
    pladsholder="Indtast venligst et brugernavn"
    [(ngModel)]="brugernavn"
   />

4. For at teste, at data bliver sendt til .ts fil, opret en Gemme() metode i brugernavn-checker-form.component.ts. Når du indsender formularen, kalder ansøgningen denne funktion.

   Gemme(): ugyldig {
   konsol.log(det her.brugernavn);
   }

5. Tilføj ngSend direktiv til
   tags ind brugernavn-checker-form.component.html, og kald save() metoden.

   <form (ngSend)="Gemme()">

6. Når du klikker på knappen Gem, vises Gemme() funktionen udskriver værdien, der er indtastet i inputfeltet, til konsollen. Du kan se konsollen under kørsel ved hjælp af browserens udviklerværktøjer. Hvis du ikke er bekendt med browserens DevTools eller ser konsollen, kan du lære mere om hvordan du bruger Chrome DevTools.
7. Send den brugernavn tilbage til .html fil. Tilføj brugernavnvariablen mellem krøllede parenteser til brugernavn-checker-form.component.html fil, efter
   tags. Brug krøllede parenteser til at vise værdien, der er gemt i brugernavnsvariablen.

   <h2 *ngHvis="brugernavn"> Brugernavn indtastet: {{ brugernavn }} </h2>

   Formularen skal vise de indtastede data samtidigt.
8. I brugernavn-checker-form.component.ts, tilføje nogle klassevariabler for at kontrollere, om brugernavnet allerede eksisterer. Erklære en brugernavne array med nogle få taget brugernavne, og tilføj en besked streng, der informerer brugeren om checken. Variablen isValidUsername er sandt, hvis det indtastede brugernavn ikke er i brugernavne-arrayet.

   brugernavne: streng[] = [ 'bart', 'lisa', 'stege', 'leela' ];
   besked: string = '';
   isValidBrugernavn: boolesk = falsk;

9. Det Gemme() metoden skal kontrollere, om det indtastede brugernavn allerede er i det eksisterende brugernavne-array eller ej. Afhængigt af resultatet vil beskeden blive indstillet i overensstemmelse hermed.

   Gemme(): ugyldig {
    if (dette.brugernavn != '') {
   det her.isValidBrugernavn = !det her.brugernavne.inkluderer(
   det her.brugernavn.tolowerCase()
    );
   hvis (det her.isValidUsername) {
   det her.besked = 'Dit nye brugernavn er'${det her.brugernavn}'`;
    } andet {
   det her.besked = `Brugernavnet'${det her.brugernavn}'er allerede taget';
    }
    }
   }

10. Fuldføre brugernavn-checker-form.component.html fil ved at vise, om det indtastede brugernavn eksisterer eller ej. Tilføj en fejlmeddelelse under

    tags efter formularen. Det isValidUsername variabel er nyttig her til at bestemme farven på den viste besked.

    <p *ngHvis="brugernavn" [ngClass]="er ValidUsername? 'succes': 'fejl'">
     {{ besked }}
    </s>

11. I din browser kl lokalvært: 4200, prøv at indtaste et brugernavn, der findes i brugernavne-arrayet: Forsøg derefter at indtaste et brugernavn, der ikke gør det.

Brug af tovejsbinding til at sende data, når du udvikler en applikation

Tovejsbinding er nyttig til validering, kontroller, beregninger og mere. Det giver komponenter mulighed for at kommunikere og dele data i realtid.

Du kan bruge funktionerne i tovejsbinding i forskellige dele af en app. Når du modtager dataene fra brugeren, kan du udføre forretningslogik og informere brugeren om resultaterne.

Nogle gange vil du gerne gemme brugerens data i en database. Du kan udforske forskellige typer databaseudbydere, du kan bruge, inklusive Firebase NoSQL-databasen.