Kas yra dvipusis įrišimas kampiniu būdu?

Dvipusis susiejimas leidžia vartotojams įvesti duomenis iš HTML failo ir siųsti juos į TypeScript failą ir atgal. Tai naudinga atliekant įvesties patvirtinimą, manipuliavimą ir kt.

Kai perduodate duomenis iš HTML į TypeScript failą, galite naudoti duomenis tam tikrai verslo logikai užbaigti. Scenarijaus pavyzdys būtų, jei norėtumėte patikrinti, ar įvesties lauke įvestas vardas jau egzistuoja.

Kaip galite naudoti dvipusį įrišimą?

Dvipusis įrišimas kampinėse programose paprastai nustatomas .html failą, naudodami ngModelis direktyva. Dvipusis įrišimas įvesties formoje gali atrodyti maždaug taip:

<įvestis 
 tipas ="paštu"
 id="paštu"
 vardas =





instagram viewer

"paštu"
 vietos rezervuaras="[email protected]"
 [(ngModelis)]="elektroninio pašto adresas"
/>

Viduje .ts failas, elektroninio pašto adresas kintamasis yra susietas su el. pašto adresu iš formos.

pašto adresas: String = ''; 

Kaip nustatyti pavyzdinę formą kampinėje programoje

Sukūrę pagrindinę programą, galite naudoti dvipusį susiejimą, kad patikrintumėte, ar potencialus naudotojo vardas jau yra.

1. Sukurti nauja Angular programa.
2. Paleiskite ng generuoti komponentą komanda sukurti naują komponentą. Čia saugosite formą.

   ng generuoti komponentą vartotojo vardo tikrinimo forma

3. Pakeiskite visą savo kodą app.component.html failą su šiomis žymomis:

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

4. Pridėkite šį CSS prie naujo komponento .css failas, esantis adresu vartotojo vardas-checker-form.component.css, norėdami formuoti formą:

   .konteineris {
    ekranas: lankstus;
    teksto lygiavimas: centre;
    pateisinti-turinys: centras;
    lygiuoti elementus: centre;
    aukštis: 100vh;
   }
   .kortelė {
    plotis: 50%;
    fono spalva: persikų puvinys;
    kraštinės spindulys: 1 rem;
    paminkštinimas: 1 rem;
   }
   input {
    kraštinė: 3px kietas #1a659e;
    kraštinės spindulys: 5 pikseliai;
    aukštis: 50px;
    linijos aukštis: normalus;
    spalva: #1a659e;
    ekranas: blokas;
    plotis: 100%;
    dėžutės dydis: bortelis-dėžė;
    Vartotojas-pasirinkite: automatinis;
    šrifto dydis: 16 pikselių;
    pamušalas: 0 6px;
    užpildymas kairėje: 12 pikselių;
   }
   įvestis:fokusas {
    kraštinė: 3px kietas #004e89;
   }
   .btn {
    ekranas: blokas;
    kontūras: 0;
    žymeklis: rodyklė;
    kraštinė: 2px kietas #1a659e;
    kraštinės spindulys: 3 pikseliai;
    spalva: #fff;
    fonas: #1a659e;
    šrifto dydis: 20 pikselių;
    šrifto svoris: 600;
    linijos aukštis: 28 pikseliai;
    pamušalas: 12px 20px;
    plotis: 100%;
    paraštė-viršus: 1rem;
   }
   .btn:užveskite pelės žymeklį {
    fonas: #004e89;
    kraštinė: #004e89;
   }
   .sėkmė {
    spalva: #14ae83;
   }
   .klaida {
    spalva: #fd536d;
   }

5. Įtraukite šį CSS į src/styles.css norėdami nustatyti visos programos šriftų šeimą, foną ir teksto spalvas:

   @importuoti url("https://fonts.googleapis.com/css2?family=Poppins: wgh@300;400&display=swap");
   kūnas {
    šrifto šeima: "Poppinsas";
    fono spalva: papayawhip;
    spalva: #1a659e;
   }

6. Pakeiskite kodą vartotojo vardas-tikrintuvas-forma.component.html, norėdami pridėti naudotojo vardo tikrinimo formą:

   <div klasė ="konteineris">
   <div klasė ="kortelę">
   <h1> Vartotojo vardo tikrintuvas </h1>
   <forma>
   <įvestis
    tipas ="tekstą"
    id="Vartotojo vardas"
    vardas ="Vartotojo vardas"
    vietos rezervuaras="Įveskite vartotojo vardą"
    />
   <mygtuko klasė="btn"> Sutaupyti </button>
   </form>
   </div>
   </div>

7. Paleiskite programą naudodami komandą ng serve terminale.

   ng tarnauti

8. Peržiūrėkite savo paraišką adresu http://localhost: 4200/.

Duomenų siuntimas tarp HTML ir TypeScript failų

Norėdami siųsti duomenis į savo .ts failą ir atgal į .html failą. Tai įmanoma naudojant ngModelis formoje įvestis žymės.

1. Importuoti FormsModule į app.module.ts failą ir pridėkite jį prie importas masyvas:

   importuoti { FormsModule } iš '@kampinis/formos';
   @NgModule({
   //...
    importas: [
   // kitas importas
    FormsModule
    ],
   //...
   })

2. Paskelbti a Vartotojo vardas klasės kintamasis .ts failas, username-checker-form.component.ts:

   vartotojo vardas: string = '';

3. Į vartotojo vardas-tikrintuvas-forma.component.html, papildyti [(ngModelis)] su Vartotojo vardas kintamasis įvesties žymoje. Tai įgalina dvipusį susiejimą ir viskas, kas įvedama į formos vartotojo vardo įvestį, bus priskiriama vartotojo vardo kintamajam .ts failą.

   <įvestis
    tipas ="tekstą"
    id="Vartotojo vardas"
    vardas ="Vartotojo vardas"
    vietos rezervuaras="Įveskite vartotojo vardą"
    [(ngModelis)]="Vartotojo vardas"
   />

4. Norėdami patikrinti, kad duomenys siunčiami į .ts failą, sukurkite a sutaupyti() metodas in username-checker-form.component.ts. Kai pateiksite formą, programa iškvies šią funkciją.

   sutaupyti(): tuštuma {
   konsolė.log(tai.Vartotojo vardas);
   }

5. Pridėkite ngPateikti direktyvą
   žymės vartotojo vardas-tikrintuvas-forma.component.html, ir iškvieskite save () metodą.

   <forma (ngSubmit)="sutaupyti()">

6. Spustelėjus mygtuką Išsaugoti, sutaupyti() funkcija išspausdins į įvesties lauką įvestą reikšmę į konsolę. Galite peržiūrėti konsolę vykdymo metu naudodami naršyklės kūrėjo įrankius. Jei nesate susipažinę su naršyklės DevTools arba nežiūrite konsolės, galite sužinoti daugiau apie kaip naudoti „Chrome DevTools“..
7. Siųsti Vartotojo vardas atgal į .html failą. Pridėkite naudotojo vardo kintamąjį tarp garbanotų skliaustų prie vartotojo vardas-tikrintuvas-forma.component.html failą, po
   žymės. Naudokite lenktus skliaustus, kad būtų rodoma vartotojo vardo kintamajame saugoma reikšmė.

   <h2 *ngIf="Vartotojo vardas"> Įvestas vartotojo vardas: {{ vartotojo vardas }} </h2>

   Formoje turi būti rodomi vienu metu įvesti duomenys.
8. Į username-checker-form.component.ts, pridėkite kai kuriuos klasės kintamuosius, kad patikrintumėte, ar vartotojo vardas jau yra. Paskelbti a vartotojo vardai masyvą su keliais vartotojo vardais ir pridėkite a žinutę eilutę, kuri informuoja vartotoją apie čekį. Kintamasis isValidUsername yra tiesa, jei įvesto vartotojo vardo nėra vartotojų vardų masyve.

   naudotojų vardai: string[] = [ 'bartas', 'Lisa', 'kepti', 'leela' ];
   pranešimas: eilutė = '';
   isValidUsername: loginis = klaidinga;

9. The sutaupyti() metodas turėtų patikrinti, ar įvestas vartotojo vardas jau yra esamame vartotojo vardų masyve, ar ne. Atsižvelgiant į rezultatą, pranešimas bus atitinkamai nustatytas.

   sutaupyti(): tuštuma {
    if (this.username != '') {
   tai.isValidUsername = !tai.usernames.includes(
   tai.Vartotojo vardas.to LowCase()
    );
   jeigu (tai.isValidUsername) {
   tai.message = „Jūsų naujas vartotojo vardas yra“${tai.Vartotojo vardas}'`;
    } Kitas {
   tai.message = "Vartotojo vardas"${tai.Vartotojo vardas}"jau paimta".;
    }
    }
   }

10. Užpildyti vartotojo vardas-tikrintuvas-forma.component.html failą, parodydamas, ar įvestas vartotojo vardas yra, ar ne. Pridėkite klaidos pranešimą po

    žymės po formos. The isValidUsername kintamasis yra naudingas norint nustatyti rodomo pranešimo spalvą.

    <p *ngIf="Vartotojo vardas" [ngClass]="isValidUsername? 'sėkmė': 'klaida'">
     {{ pranešimas }}
    </p>

11. Savo naršyklėje adresu Localhost: 4200, pabandykite įvesti vartotojo vardą, esantį naudotojų vardų masyve: Tada pabandykite įvesti naudotojo vardą, kuris neįveda.

Dviejų krypčių susiejimo naudojimas duomenims siųsti kuriant programą

Dvipusis susiejimas yra naudingas tikrinant, atliekant skaičiavimus ir kt. Tai leidžia komponentams bendrauti ir dalytis duomenimis realiuoju laiku.

Galite naudoti dvipusio įrišimo funkcijas įvairiose programos dalyse. Gavę duomenis iš vartotojo, galite vykdyti verslo logiką ir informuoti vartotoją apie rezultatus.

Kartais norėtumėte saugoti vartotojo duomenis duomenų bazėje. Galite tyrinėti įvairių tipų duomenų bazių teikėjus, kuriuos galite naudoti, įskaitant „Firebase NoSQL“ duomenų bazę.