Kas ir divvirzienu iesiešana leņķī?

Divvirzienu saistīšana ļauj lietotājiem ievadīt datus no HTML faila un nosūtīt tos uz TypeScript failu un atpakaļ. Tas ir noderīgi ievades validācijai, manipulācijām un citām darbībām.

Kad esat nosūtījis datus no HTML uz TypeScript failu, varat izmantot datus, lai pabeigtu noteiktu biznesa loģiku. Scenārija piemērs būtu, ja vēlaties pārbaudīt, vai ievades laukā ievadītais nosaukums jau pastāv.

Kā jūs varat izmantot divvirzienu iesiešanu?

Divvirzienu saistīšana lietotnēs Angular parasti tiek iestatīta .html failu, izmantojot ngModelis direktīva. Divvirzienu iesiešana ievades formā var izskatīties šādi:

<ievade 
 tips="e-pasts"
 id="e-pasts"
 vārds ="e-pasts"
 vietturis="[email protected]"
 [(ngModelis)]="epasta adrese"
/>

Iekš .ts fails, epasta adrese mainīgais ir saistīts ar e-pasta adresi no veidlapas.

e-pasta adrese: String = ''; 

Veidlapas parauga iestatīšana Angular lietotnē

Izveidojot pamata lietotni, varat izmantot divvirzienu saistīšanu, lai pārbaudītu, vai potenciālais lietotājvārds jau pastāv.

1. Izveidot a jauna Angular lietotne.
2. Palaidiet ng ģenerēt komponentu komandu, lai izveidotu jaunu komponentu. Šeit jūs uzglabāsit veidlapu.

   ng ģenerēt komponentu lietotājvārda pārbaudītāja forma

3. Aizstāt visu kodu savā app.component.html failu ar šādiem tagiem:

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

4. Pievienojiet šo CSS savam jaunajam komponentam .css fails, kas atrodas lietotājvārds-checker-form.component.css, lai veidotu veidlapas stilu:

   .konteiners {
    displejs: flex;
    teksta līdzināšana: centrs;
    attaisnot-saturs: centrs;
    izlīdzināt vienumus: centrs;
    augstums: 100vh;
   }
   .karte {
    platums: 50%;
    fona krāsa: persiku pufs;
    apmales rādiuss: 1rem;
    polsterējums: 1rem;
   }
   ievade {
    robeža: 3px ciets #1a659e;
    apmales rādiuss: 5 pikseļi;
    augstums: 50 pikseļi;
    līnijas augstums: normāls;
    krāsa: #1a659e;
    displejs: bloks;
    platums: 100%;
    kastes izmēra noteikšana: apmale-box;
    lietotājs-izvēlieties: auto;
    fonta izmērs: 16 pikseļi;
    polsterējums: 0 6 pikseļi;
    polsterējums pa kreisi: 12 pikseļi;
   }
   ievade: fokuss {
    robeža: 3px ciets #004e89;
   }
   .btn {
    displejs: bloks;
    kontūra: 0;
    kursors: rādītājs;
    robeža: 2px ciets #1a659e;
    apmales rādiuss: 3 pikseļi;
    krāsa: #fff;
    fons: #1a659e;
    fonta izmērs: 20 pikseļi;
    fonta svars: 600;
    līnijas augstums: 28 pikseļi;
    polsterējums: 12 pikseļi 20 pikseļi;
    platums: 100%;
    mala-augšdaļa: 1rem;
   }
   .btn:virziet kursoru {
    fons: #004e89;
    robeža: #004e89;
   }
   .veiksmi {
    krāsa: #14ae83;
   }
   .kļūda {
    krāsa: #fd536d;
   }

5. Pievienojiet tālāk norādīto CSS src/styles.css lai iestatītu visas lietotnes fontu saimi, fona un teksta krāsas:

   @importēt url("https://fonts.googleapis.com/css2?family=Poppins: wgh@300;400&displejs=swap");
   body {
    fontu ģimene: "Popins";
    fona krāsa: papayawhip;
    krāsa: #1a659e;
   }

6. Nomainiet kodu username-checker-form.component.html, lai pievienotu lietotājvārda pārbaudes veidlapu:

   <div klase="konteiners">
   <div klase="karti">
   <h1> Lietotājvārdu pārbaudītājs </h1>
   <formā>
   <ievade
    tips="tekstu"
    id="lietotājvārds"
    vārds ="lietotājvārds"
    vietturis="Lūdzu, ievadiet lietotājvārdu"
    />
   <pogas klase="btn"> Saglabāt </button>
   </form>
   </div>
   </div>

7. Palaidiet savu lietotni, izmantojot termināļa komandu ng serve.

   ng kalpot

8. Skatiet savu pieteikumu vietnē http://localhost: 4200/.

Datu sūtīšana starp HTML un TypeScript failiem

Izmantojiet divvirzienu saistīšanu, lai nosūtītu datus uz savu .ts failu un atpakaļ uz .html failu. Tas ir iespējams, izmantojot ngModelis formā ievade tagus.

1. Importēt FormsModule iekšā app.module.ts failu un pievienojiet to imports masīvs:

   imports { FormsModule } no '@leņķa/formas';
   @NgModule({
   //...
    imports: [
   // cits imports
    FormsModule
    ],
   //...
   })

2. Paziņot a lietotājvārds klases mainīgais .ts fails, username-checker-form.component.ts:

   lietotājvārds: string = '';

3. In username-checker-form.component.html, pievieno [(ngModelis)] Ar lietotājvārds mainīgais ievades tagā. Tas iespējo divvirzienu saistīšanu, un viss, kas ievadīts veidlapas lietotājvārda ievadē, tiek piešķirts lietotājvārda mainīgajam .ts failu.

   <ievade
    tips="tekstu"
    id="lietotājvārds"
    vārds ="lietotājvārds"
    vietturis="Lūdzu, ievadiet lietotājvārdu"
    [(ngModelis)]="lietotājvārds"
   />

4. Lai pārbaudītu, ka dati tiek nosūtīti uz .ts failu, izveidojiet a saglabāt () metode iekšā username-checker-form.component.ts. Iesniedzot veidlapu, lietojumprogramma izsauks šo funkciju.

   saglabāt (): nederīgs {
   konsole.log(šis.lietotājvārds);
   }

5. Pievienojiet ngIesniegt direktīva
   atzīmes iekšā username-checker-form.component.html, un izsauciet metodi save ().

   <forma (ngSubmit)="saglabāt ()">

6. Noklikšķinot uz pogas Saglabāt, saglabāt () funkcija izdrukās ievades laukā ievadīto vērtību konsolē. Varat skatīt konsoli izpildlaikā, izmantojot pārlūkprogrammas izstrādātāja rīkus. Ja nepārzināt pārlūkprogrammas DevTools vai konsoles skatīšanu, varat uzzināt vairāk par kā izmantot Chrome DevTools.
7. Nosūtiet lietotājvārds atpakaļ uz .html failu. Pievienojiet lietotājvārda mainīgo starp cirtainajām iekavām username-checker-form.component.html failu, pēc
   tagus. Izmantojiet cirtaini iekavas, lai parādītu lietotājvārda mainīgajā saglabāto vērtību.

   <h2 *ngIf="lietotājvārds"> Ievadīts lietotājvārds: {{ lietotājvārds }} </h2>

   Veidlapā ir jāparāda vienlaicīgi ievadītie dati.
8. In username-checker-form.component.ts, pievienojiet dažus klases mainīgos, lai pārbaudītu, vai lietotājvārds jau pastāv. Paziņot a lietotājvārdi masīvu ar dažiem lietotājvārdiem un pievienojiet a ziņa virkne, kas informē lietotāju par čeku. Mainīgais ir ValidUsername ir patiess, ja ievadītais lietotājvārds nav lietotājvārdu masīvā.

   lietotājvārdi: string[] = [ 'bart', 'Lisa', 'apcep', 'leela' ];
   ziņojums: virkne = '';
   isValidUsername: Būla = viltus;

9. The saglabāt () metodei ir jāpārbauda, ​​vai ievadītais lietotājvārds jau ir esošajā lietotājvārdu masīvā. Atkarībā no iznākuma ziņojums tiks attiecīgi iestatīts.

   saglabāt (): nederīgs {
    if (šis.lietotājvārds != '') {
   šis.isValidUsername = !šis.usernames.includes(
   šis.lietotājvārds.to LowCase()
    );
   ja (šis.isValidUsername) {
   šis.Message = `Tavs jaunais lietotājvārds ir${šis.lietotājvārds}'`;
    } cits {
   šis.Message = `lietotājvārds'${šis.lietotājvārds}"jau ir uzņemts".;
    }
    }
   }

10. Pabeigt username-checker-form.component.html failu, parādot, vai ievadītais lietotājvārds pastāv vai ne. Pievienojiet kļūdas ziņojumu zem

    tagus aiz veidlapas. The ir ValidUsername mainīgais šeit ir noderīgs, lai noteiktu parādītā ziņojuma krāsu.

    <p *ngIf="lietotājvārds" [ngClass]="isValidUsername? 'panākumus': 'kļūda'">
     {{ ziņa }}
    </lpp>

11. Jūsu pārlūkprogrammā plkst vietējais saimnieks: 4200, mēģiniet ievadīt lietotājvārdu, kas pastāv lietotājvārdu masīvā: Pēc tam mēģiniet ievadīt lietotājvārdu, kas to nedara.

Divvirzienu saistīšanas izmantošana datu sūtīšanai, izstrādājot lietojumprogrammu

Divvirzienu saistīšana ir noderīga validācijai, pārbaudēm, aprēķiniem un citam. Tas ļauj komponentiem sazināties un koplietot datus reāllaikā.

Divvirzienu iesiešanas funkcijas varat izmantot dažādās lietotnes daļās. Kad esat saņēmis datus no lietotāja, varat izpildīt biznesa loģiku un informēt lietotāju par rezultātiem.

Dažreiz jūs vēlaties saglabāt lietotāja datus datu bāzē. Varat izpētīt dažādu veidu datu bāzes nodrošinātājus, tostarp Firebase NoSQL datu bāzi.