Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen.
Met tweerichtingsbinding kunnen uw componenten gegevens delen, gebeurtenissen afhandelen en waarden in realtime bijwerken.
Tweerichtingsbinding stelt gebruikers in staat gegevens uit het HTML-bestand in te voeren en naar het TypeScript-bestand en terug te sturen. Dit is handig voor invoervalidatie, manipulatie en meer.
Zodra u gegevens van de HTML doorgeeft aan het TypeScript-bestand, kunt u de gegevens gebruiken om bepaalde bedrijfslogica te voltooien. Een voorbeeldscenario zou zijn als u wilt controleren of de naam die in een invoerveld is ingevoerd al bestaat.
Hoe kunt u tweerichtingsbinding gebruiken?
Tweerichtingsbinding in Angular-apps wordt meestal ingesteld in de .html bestand, met behulp van de ngModel richtlijn. Tweerichtingsbinding in een invoerformulier kan er ongeveer zo uitzien:
<invoer
type="e-mailen"
identiteitsbewijs="e-mailen"
naam="e-mailen"
tijdelijke aanduiding="[email protected]"
[(ngModel)]="e-mailadres"
/>In de .ts bestand, de e-mailadres variabele is gebonden aan het e-mailadres van het formulier.
e-mailadres: String = ''; Een voorbeeldformulier instellen in een Angular-app
Door een eenvoudige app te bouwen, kunt u tweerichtingsbinding gebruiken om te controleren of een potentiële gebruikersnaam al bestaat.
- Maak een nieuwe Angular-app.
- Voer de... uit ng component genereren opdracht om een nieuw onderdeel te maken. Hier slaat u het formulier op.
ng genereer component gebruikersnaam-checker-formulier - Vervang alle code in uw app.component.html bestand met de volgende tags:
<app-gebruikersnaam-checker-formulier></app-username-checker-form> - Voeg de volgende CSS toe aan uw nieuwe component .css bestand, gelegen op gebruikersnaam-checker-form.component.css, om het formulier op te maken:
.container {
weergeven: flex;
tekst uitlijnen: centreren;
rechtvaardigen-inhoud: centrum;
items uitlijnen: centreren;
hoogte: 100vh;
}.kaart {
breedte: 50%;
achtergrondkleur: peachpuff;
grensstraal: 1rem;
opvulling: 1rem;
}invoer {
grens: 3px solide #1a659e;
grensstraal: 5px;
hoogte: 50px;
regelhoogte: normaal;
kleur: #1a659e;
weergeven: blokkeren;
breedte: 100%;
doosmaat: randdoos;
gebruiker-selecteren: auto;
lettergrootte: 16px;
opvulling: 0 6px;
opvulling links: 12px;
}invoer:focus {
grens: 3px solide #004e89;
}.btn {
weergeven: blokkeren;
overzicht: 0;
cursor: aanwijzer;
grens: 2px solide #1a659e;
grensstraal: 3px;
kleur: #fff;
achtergrond: #1a659e;
lettergrootte: 20px;
lettergewicht: 600;
lijnhoogte: 28px;
opvulling: 12px 20px;
breedte: 100%;
marge-top: 1rem;
}.btn:zweven {
achtergrond: #004e89;
grens: #004e89;
}.succes {
kleur: #14ae83;
}.fout {
kleur: #fd536d;
} - Voeg de volgende CSS toe aan src/stijlen.css om de lettertypefamilie, achtergrond en tekstkleuren van de algehele app in te stellen:
@import-URL("https://fonts.googleapis.com/css2?family=Poppins: wght@300;400&tonen=wisselen");lichaam {
font-familie: "Poppins";
achtergrondkleur: papayawhip;
kleur: #1a659e;
} - Vervang de code erin gebruikersnaam-checker-form.component.html, om het gebruikersnaamcontroleformulier toe te voegen:
<div klasse="container">
<div klasse="kaart">
<h1> Gebruikersnaam Checker </h1><formulier>
<invoer
type="tekst"
identiteitsbewijs="gebruikersnaam"
naam="gebruikersnaam"
tijdelijke aanduiding="Voer een gebruikersnaam in"
/>
<knop klasse="btn"> Redden </button>
</form></div>
</div> - Voer uw app uit met de opdracht ng serve in de terminal.
serveren - Bekijk je sollicitatie op http://localhost: 4200/.
Gegevens verzenden tussen de HTML- en TypeScript-bestanden
Gebruik tweerichtingsbinding om gegevens naar uw te verzenden .ts bestand en terug naar de .html bestand. Dit is mogelijk met behulp van ngModel in de formulieren invoer labels.
- Importeer de FormulierenModule in de app.module.ts bestand en voeg het toe aan het invoer reeks:
importeren { FormulierenModule } van '@angular/formulieren';@NgModule({
//...
invoer: [
// andere invoer
FormulierenModule
],
//...
}) - Verklaar een gebruikersnaam klassenvariabele in de .ts bestand, gebruikersnaam-checker-form.component.ts:
gebruikersnaam: tekenreeks = ''; - In gebruikersnaam-checker-form.component.html, toevoegen [(ngModel)] met de gebruikersnaam variabele in de invoertag. Dit maakt binding in twee richtingen mogelijk, en alles wat in de gebruikersnaam-invoer van het formulier wordt getypt, wordt toegewezen aan de gebruikersnaam-variabele in de .ts bestand.
<invoer
type="tekst"
identiteitsbewijs="gebruikersnaam"
naam="gebruikersnaam"
tijdelijke aanduiding="Voer een gebruikersnaam in"
[(ngModel)]="gebruikersnaam"
/> - Om te testen of er gegevens naar het .ts bestand, maak een redden() methode in gebruikersnaam-checker-form.component.ts. Wanneer u het formulier indient, roept de applicatie deze functie aan.
redden(): leegte {
troosten.log(dit.gebruikersnaam);
} - Voeg de ngIndienen richtlijn aan de
- Wanneer u op de knop Opslaan klikt, wordt het redden() functie drukt de waarde die in het invoerveld is ingevoerd af naar de console. U kunt de console tijdens runtime bekijken met behulp van de ontwikkelaarstools van de browser. Als u niet bekend bent met browser DevTools of het bekijken van de console, kunt u hier meer over leren hoe u Chrome DevTools gebruikt.
- Zend de gebruikersnaam terug naar de .html bestand. Voeg de gebruikersnaamvariabele tussen accolades toe aan het gebruikersnaam-checker-form.component.html bestand, na de
- In gebruikersnaam-checker-form.component.ts, voeg enkele klassevariabelen toe om te controleren of de gebruikersnaam al bestaat. Verklaar een gebruikersnamen array met een paar gebruikte gebruikersnamen, en voeg een bericht tekenreeks die de gebruiker informeert over de controle. De variabele isValidGebruikersnaam is waar als de ingevoerde gebruikersnaam niet in de array met gebruikersnamen staat.
gebruikersnamen: string[] = [ 'bart', 'lisa', 'bak', 'leela' ];
bericht: tekenreeks = '';
isValidGebruikersnaam: booleaans = vals; - De redden() methode moet controleren of de ingevoerde gebruikersnaam al in de bestaande gebruikersnamenreeks staat of niet. Afhankelijk van de uitkomst wordt het bericht dienovereenkomstig ingesteld.
redden(): leegte {
if (deze.gebruikersnaam != '') {
dit.isValidGebruikersnaam = !dit.gebruikersnamen.inclusief(
dit.gebruikersnaam.naar kleine letters()
);als (dit.isValidGebruikersnaam) {
dit.bericht = `Je nieuwe gebruikersnaam is '${dit.gebruikersnaam}'`;
} anders {
dit.bericht = `De gebruikersnaam'${dit.gebruikersnaam}'is al bezet';
}
}
} - Voltooi de gebruikersnaam-checker-form.component.html bestand door te laten zien of de ingevoerde gebruikersnaam bestaat of niet. Voeg een foutmelding toe onder het
tags na het formulier. De isValidGebruikersnaam variabele is hier nuttig om de kleur van het weergegeven bericht te bepalen.
<p *ngAls="gebruikersnaam" [ngKlasse]="isValidUsername? 'succes': 'fout'">
{{ bericht }}
</P> - In je browser op lokale host: 4200, probeer een gebruikersnaam in te voeren die bestaat in de gebruikersnaamarray: Probeer vervolgens een gebruikersnaam in te voeren die dat niet doet.
Tweerichtingsbinding gebruiken om gegevens te verzenden bij het ontwikkelen van een toepassing
Tweerichtingsbinding is handig voor validatie, controles, berekeningen en meer. Het stelt componenten in staat om in realtime te communiceren en gegevens te delen.
U kunt functies van tweerichtingsbinding gebruiken in verschillende delen van een app. Zodra u de gegevens van de gebruiker hebt ontvangen, kunt u bedrijfslogica uitvoeren en de gebruiker informeren over de resultaten.
Soms wilt u de gegevens van de gebruiker in een database opslaan. U kunt verschillende soorten databaseproviders verkennen die u kunt gebruiken, waaronder de Firebase NoSQL-database.
