Mikä on kaksisuuntainen sidonta kulmamuodossa?

Kaksisuuntaisen sidoksen avulla käyttäjät voivat syöttää tietoja HTML-tiedostosta ja lähettää ne TypeScript-tiedostoon ja takaisin. Tämä on hyödyllistä syötteiden validoinnissa, manipuloinnissa ja muussa.

Kun siirrät tiedot HTML-tiedostosta TypeScript-tiedostoon, voit käyttää tietoja täydentämään tiettyä liiketoimintalogiikkaa. Esimerkkiskenaario olisi, jos haluat tarkistaa, onko syöttökenttään syötetty nimi jo olemassa.

Kuinka voit käyttää kaksisuuntaista sidontaa?

Kaksisuuntainen sidonta Angular-sovelluksissa asetetaan yleensä .html tiedostoa käyttämällä ngModel direktiivi. Kaksisuuntainen sidonta syöttömuodossa voi näyttää suunnilleen tältä:

<syöttö 
 tyyppi="sähköposti"
 id="sähköposti"
 nimi ="sähköposti"
 paikkamerkki="esimerkki@esimerkki.fi"
 [(ngModel)]="sähköpostiosoite"
/>

Vuonna .ts tiedosto, sähköpostiosoite muuttuja on sidottu lomakkeen emailAddressiin.

Sähköpostiosoite: String = ''; 

Esimerkkilomakkeen määrittäminen Angular-sovelluksessa

Rakentamalla perussovelluksen voit käyttää kaksisuuntaista sidontaa tarkistaaksesi, onko mahdollinen käyttäjänimi jo olemassa.

1. Luo uusi Angular-sovellus.
2. Suorita ng tuottaa komponenttia komento luodaksesi uuden komponentin. Tässä tallennat lomakkeen.

   ng luo komponentti username-checker-form

3. Vaihda kaikki koodit app.component.html tiedosto seuraavilla tunnisteilla:

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

4. Lisää seuraava CSS uuteen komponenttiin .css tiedosto, joka sijaitsee osoitteessa username-checker-form.component.css, muotoillaksesi muotoa:

   .container {
    näyttö: flex;
    tekstin tasaus: keskellä;
    perustella-sisältö: keskus;
    kohdista kohteet: keskellä;
    korkeus: 100vh;
   }
   .kortti {
    leveys: 50 %;
    taustaväri: persikkapukki;
    raja-säde: 1rem;
    pehmuste: 1 rem;
   }
   input {
    raja: 3px kiinteä #1a659e;
    reunan säde: 5px;
    korkeus: 50px;
    rivin korkeus: normaali;
    väri: #1a659e;
    näyttö: lohko;
    leveys: 100 %;
    laatikon koko: border-box;
    käyttäjä-valitse: auto;
    fontin koko: 16px;
    täyte: 0 6px;
    täyte-vasen: 12px;
   }
   syöttö: keskittyä {
    raja: 3px kiinteä #004e89;
   }
   .btn {
    näyttö: lohko;
    ääriviivat: 0;
    kohdistin: osoitin;
    raja: 2px kiinteä #1a659e;
    reunan säde: 3px;
    väri: #F F F;
    tausta: #1a659e;
    fontin koko: 20px;
    fontin paino: 600;
    rivin korkeus: 28 kuvapistettä;
    täyte: 12px 20px;
    leveys: 100 %;
    marginaali yläosa: 1rem;
   }
   .btn:hover {
    tausta: #004e89;
    raja: #004e89;
   }
   .menestys {
    väri: #14ae83;
   }
   .virhe {
    väri: #fd536d;
   }

5. Lisää seuraava CSS sisään src/styles.css Voit asettaa koko sovelluksen kirjasinperheen, taustan ja tekstin värit:

   @import url("https://fonts.googleapis.com/css2?family=Poppins: wgh@300;400&näyttö=vaihto");
   body {
    font-family: "Poppins";
    taustaväri: papayawhip;
    väri: #1a659e;
   }

6. Vaihda koodi sisään username-checker-form.component.html, lisätäksesi käyttäjänimen tarkistuslomakkeen:

   <div class="kontti">
   <div class="kortti">
   <h1> Käyttäjätunnusten tarkistus </h1>
   <muodossa>
   <syöttö
    tyyppi="teksti"
    id="käyttäjätunnus"
    nimi ="käyttäjätunnus"
    paikkamerkki="Olkaa hyvä ja kirjoittakaa käyttäjätunnus"
    />
   <painikeluokka="btn"> Tallentaa </button>
   </form>
   </div>
   </div>

7. Suorita sovellus terminaalin ng serve -komennolla.

   palvella

8. Katso hakemuksesi osoitteessa http://localhost: 4200/.

Tietojen lähettäminen HTML- ja TypeScript-tiedostojen välillä

Käytä kaksisuuntaista sidontaa tietojen lähettämiseen .ts tiedosto ja takaisin .html tiedosto. Tämä on mahdollista käyttämällä ngModel muodossa syöttö tunnisteet.

1. Tuo FormsModule sisään app.module.ts tiedosto ja lisää se tiedostoon tuonti joukko:

   tuonti { FormsModule } alkaen '@kulma/muodot';
   @NgModule({
   //...
    tuonti: [
   // muu tuonti
    FormsModule
    ],
   //...
   })

2. Ilmoita a käyttäjätunnus luokan muuttuja .ts tiedosto, username-checker-form.component.ts:

   käyttäjätunnus: string = '';

3. Sisään username-checker-form.component.html, lisätä [(ngModel)] kanssa käyttäjätunnus muuttuja syöttötunnisteessa. Tämä mahdollistaa kaksisuuntaisen sitomisen, ja kaikki lomakkeen käyttäjänimen syötteeseen kirjoitettu osoitetaan käyttäjänimen muuttujaan .ts tiedosto.

   <syöttö
    tyyppi="teksti"
    id="käyttäjätunnus"
    nimi ="käyttäjätunnus"
    paikkamerkki="Olkaa hyvä ja kirjoittakaa käyttäjätunnus"
    [(ngModel)]="käyttäjätunnus"
   />

4. Tietojen testaamiseksi lähetetään .ts tiedosto, luo a Tallentaa() menetelmä sisään username-checker-form.component.ts. Kun lähetät lomakkeen, sovellus kutsuu tätä toimintoa.

   Tallentaa(): mitätön {
   konsoli.Hirsi(Tämä.käyttäjänimi);
   }

5. Lisää ngLähetä direktiiviä
   tunnisteet sisään username-checker-form.component.html, ja kutsu save()-metodia.

   <muoto (ngSubmit)="Tallentaa()">

6. Kun napsautat Tallenna-painiketta, Tallentaa() toiminto tulostaa syöttökenttään syötetyn arvon konsoliin. Voit tarkastella konsolia ajon aikana selaimen kehittäjätyökalujen avulla. Jos et tunne selaimen DevToolsia tai konsolin katselua, voit lukea lisää kuinka käytät Chrome DevToolsia.
7. Lähetä käyttäjätunnus takaisin .html tiedosto. Lisää käyttäjänimen muuttuja kiharasulkujen väliin username-checker-form.component.html tiedosto jälkeen
   tunnisteet. Käytä kaarevia sulkeita näyttääksesi käyttäjänimimuuttujaan tallennetun arvon.

   <h2 *ngIf="käyttäjätunnus"> Annettu käyttäjänimi: {{ käyttäjänimi }} </h2>

   Lomakkeessa tulee näkyä samanaikaisesti syötetyt tiedot.
8. Sisään username-checker-form.component.ts, lisää luokkamuuttujia tarkistaaksesi, onko käyttäjänimi jo olemassa. Ilmoita a käyttäjätunnuksia taulukko, jossa on muutama käyttäjätunnus, ja lisää a viesti merkkijono, joka ilmoittaa käyttäjälle shekistä. Muuttuja isValidUsername on tosi, jos annettu käyttäjänimi ei ole käyttäjätunnustaulukossa.

   käyttäjänimet: string[] = [ 'bart', 'lisa', 'paistaa', 'leela' ];
   viesti: merkkijono = '';
   isValidUsername: boolean = väärä;

9. The Tallentaa() -menetelmän tulisi tarkistaa, onko annettu käyttäjänimi jo olemassa olevassa käyttäjätunnustaulukossa vai ei. Lopputuloksesta riippuen viesti asetetaan vastaavasti.

   Tallentaa(): mitätön {
    if (this.username != '') {
   Tämä.isValidUsername = !Tämä.usernames.includes(
   Tämä.käyttäjänimi.toLowerCase()
    );
   jos (Tämä.isValidUsername) {
   Tämä.viesti = "Uusi käyttäjänimesi on"${Tämä.username}'`;
    } muu {
   Tämä.viesti = `käyttäjänimi'${Tämä.username}"on jo otettu".;
    }
    }
   }

10. Täydennä username-checker-form.component.html tiedostoa näyttämällä, onko syötetty käyttäjätunnus olemassa vai ei. Lisää virheilmoitus alle

    tagit lomakkeen jälkeen. The isValidUsername muuttuja auttaa tässä määrittämään näytettävän viestin värin.

    <p *ngIf="käyttäjätunnus" [ngClass]="isValidUsername? 'menestys': 'virhe'">
     {{ viesti }}
    </s>

11. selaimessasi osoitteessa paikallinen isäntä: 4200, yritä kirjoittaa käyttäjänimi, joka on olemassa käyttäjätunnustaulukossa: Yritä sitten syöttää käyttäjätunnus, joka ei anna sitä.

Kaksisuuntaisen sidoksen käyttäminen tietojen lähettämiseen sovellusta kehitettäessä

Kaksisuuntainen sidonta on hyödyllinen validoinnissa, tarkastuksissa, laskelmissa ja muussa. Sen avulla komponentit voivat kommunikoida ja jakaa tietoja reaaliajassa.

Voit käyttää kaksisuuntaisen sitomisen ominaisuuksia sovelluksen eri osissa. Kun olet vastaanottanut tiedot käyttäjältä, voit suorittaa liiketoimintalogiikkaa ja ilmoittaa käyttäjälle tuloksista.

Joskus haluat tallentaa käyttäjän tiedot tietokantaan. Voit tutustua erilaisiin tietokantatarjoajiin, joita voit käyttää, mukaan lukien Firebase NoSQL -tietokanta.