Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.
Avec la liaison bidirectionnelle, vos composants peuvent partager des données, gérer des événements et mettre à jour des valeurs en temps réel.
La liaison bidirectionnelle permet aux utilisateurs de saisir des données à partir du fichier HTML et de les envoyer au fichier TypeScript et inversement. Ceci est utile pour la validation des entrées, la manipulation, etc.
Une fois que vous avez transmis les données du HTML au fichier TypeScript, vous pouvez utiliser les données pour compléter certaines logiques métier. Un exemple de scénario serait si vous vouliez vérifier si le nom entré dans un champ de saisie existait déjà.
Comment pouvez-vous utiliser la liaison bidirectionnelle ?
La liaison bidirectionnelle dans les applications angulaires est généralement définie dans le
.html fichier, en utilisant le ngModel directif. La liaison bidirectionnelle dans un formulaire de saisie peut ressembler à ceci :<saisir
taper="e-mail"
identifiant="e-mail"
nom="e-mail"
espace réservé="[email protected]"
[(ngModel)]="adresse e-mail"
/>Dans le .ts dossier, le adresse e-mail La variable est liée à l'emailAddress du formulaire.
adresse e-mail: chaîne = ''; Comment configurer un exemple de formulaire dans une application angulaire
En créant une application de base, vous pouvez utiliser une liaison bidirectionnelle pour vérifier si un nom d'utilisateur potentiel existe déjà.
- Créer un nouvelle application angulaire.
- Exécutez le ng générer un composant commande pour créer un nouveau composant. C'est ici que vous stockerez le formulaire.
ng génère un composant username-checker-form - Remplacez tout le code de votre app.component.html fichier avec les balises suivantes :
<app-username-checker-form></app-username-checker-form> - Ajoutez le CSS suivant dans votre nouveau composant .css fichier, situé à nom d'utilisateur-checker-form.component.css, pour styliser le formulaire :
.récipient {
affichage: flexible ;
aligner le texte: centrer ;
justifier-contenu: centrer ;
align-items: center ;
hauteur: 100vh ;
}.carte {
largeur: 50 % ;
couleur de fond: peachpuff ;
rayon de bordure: 1 rem ;
rembourrage: 1rem ;
}saisir {
frontière: 3px solide #1a659e ;
rayon de bordure: 5 px ;
hauteur: 50px ;
hauteur de ligne: normale ;
couleur: #1a659e ;
bloc de visualisation;
largeur: 100 % ;
dimensionnement de la boîte: border-box ;
utilisateur-sélectionner: auto;
taille de police: 16 px ;
rembourrage: 0 6px ;
rembourrage à gauche: 12 px ;
}saisir:se concentrer {
frontière: 3px solide #004e89 ;
}.btn {
bloc de visualisation;
contour: 0 ;
curseur: pointeur ;
frontière: 2px solide #1a659e ;
rayon de bordure: 3 px ;
couleur: #fff;
arrière-plan: #1a659e ;
taille de police: 20 px ;
poids de la police: 600 ;
hauteur de ligne: 28 px ;
rembourrage: 12px 20px ;
largeur: 100 % ;
marge supérieure: 1rem ;
}.btn:flotter {
arrière-plan: #004e89 ;
frontière: #004e89 ;
}.succès {
couleur: #14ae83 ;
}.erreur {
couleur: #fd536d ;
} - Ajoutez le CSS suivant dans src/styles.css pour définir la famille de polices, l'arrière-plan et les couleurs du texte de l'application globale :
@importer l'url("https://fonts.googleapis.com/css2?family=Poppins: poids@300;400&afficher=échanger");corps {
famille de polices: "Poppins";
couleur de fond: papayawhip ;
couleur: #1a659e ;
} - Remplacez le code dans username-checker-form.component.html, pour ajouter le formulaire de vérification du nom d'utilisateur :
<classe div="récipient">
<classe div="carte">
<h1> Vérificateur de nom d'utilisateur </h1><former>
<saisir
taper="texte"
identifiant="nom d'utilisateur"
nom="nom d'utilisateur"
espace réservé="Merci d'entrer un nom d'utilisateur"
/>
<classe de bouton="btn"> Sauvegarder </button>
</form></div>
</div> - Exécutez votre application à l'aide de la commande ng serve dans le terminal.
ng servir - Consultez votre candidature sur http://localhost: 4200/.
Envoi de données entre les fichiers HTML et TypeScript
Utilisez la liaison bidirectionnelle pour envoyer des données à votre .ts fichier et retour au .html déposer. Ceci est possible avec l'utilisation de ngModel dans le formulaire saisir Mots clés.
- Importez le ModuleFormulaires dans le app.module.ts fichier et ajoutez-le au importations déployer:
importer { ModuleFormulaires } depuis '@angular/forms' ;@NgModule({
//...
importations: [
// autres importations
ModuleFormulaires
],
//...
}) - Déclarer un nom d'utilisateur variable de classe dans le .ts déposer, nom d'utilisateur-checker-form.component.ts:
nom d'utilisateur: chaîne = ''; - Dans username-checker-form.component.html, ajouter [(ngModèle)] avec le nom d'utilisateur variable dans la balise d'entrée. Cela permet une liaison bidirectionnelle, et tout ce qui est saisi dans l'entrée de nom d'utilisateur du formulaire est affecté à la variable de nom d'utilisateur dans le .ts déposer.
<saisir
taper="texte"
identifiant="nom d'utilisateur"
nom="nom d'utilisateur"
espace réservé="Merci d'entrer un nom d'utilisateur"
[(ngModel)]="nom d'utilisateur"
/> - Pour tester que les données sont envoyées au .ts fichier, créer un sauvegarder() méthode dans nom d'utilisateur-checker-form.component.ts. Lorsque vous soumettez le formulaire, l'application appellera cette fonction.
sauvegarder(): annuler {
console.enregistrer(ce.nom d'utilisateur);
} - Ajouter le ngSoumettre directive à la
- Lorsque vous cliquez sur le bouton Enregistrer, le sauvegarder() La fonction imprimera la valeur saisie dans le champ de saisie sur la console. Vous pouvez afficher la console lors de l'exécution à l'aide des outils de développement du navigateur. Si vous n'êtes pas familier avec les DevTools du navigateur ou l'affichage de la console, vous pouvez en savoir plus sur comment utiliser Chrome DevTools.
- Envoyer le nom d'utilisateur Retour à la .html déposer. Ajoutez la variable nom d'utilisateur entre accolades à la username-checker-form.component.html dossier, après le
- Dans nom d'utilisateur-checker-form.component.ts, ajoutez des variables de classe pour vérifier si le nom d'utilisateur existe déjà. Déclarer un noms d'utilisateur tableau avec quelques noms d'utilisateur pris, et ajoutez un message chaîne qui informe l'utilisateur de la vérification. La variable isValidUsername est vrai si le nom d'utilisateur saisi n'est pas dans le tableau des noms d'utilisateur.
noms d'utilisateur: chaîne[] = [ 'bart', 'lisa', 'frire', 'leela' ];
message: chaîne = '';
isValidUsername: booléen = FAUX; - Le sauvegarder() La méthode doit vérifier si le nom d'utilisateur entré est déjà dans le tableau de noms d'utilisateurs existant ou non. Selon le résultat, le message sera défini en conséquence.
sauvegarder(): annuler {
si (this.username != '') {
ce.isValidUsername = !ce.usernames.includes(
ce.nom d'utilisateur.toLowerCase()
);si (ce.isValidUsername) {
ce.message = `Votre nouveau nom d'utilisateur est '${ce.nom d'utilisateur}'`;
} autre {
ce.message = `Le nom d'utilisateur '${ce.nom d'utilisateur}' a déjà été prise ';
}
}
} - Complétez le username-checker-form.component.html fichier en indiquant si le nom d'utilisateur saisi existe ou non. Ajouter un message d'erreur sous le
balises après le formulaire. Le isValidUsername La variable est utile ici pour déterminer la couleur du message affiché.
<p *ngIf="nom d'utilisateur" [ngClass]="isValidUsername? 'succès': 'erreur'">
{{ message }}
</p> - Dans votre navigateur à hôte local: 4200, essayez d'entrer un nom d'utilisateur qui existe dans le tableau des noms d'utilisateur: Ensuite, essayez d'entrer un nom d'utilisateur qui ne le fait pas.
Utilisation de la liaison bidirectionnelle pour envoyer des données lors du développement d'une application
La liaison bidirectionnelle est utile pour la validation, les vérifications, les calculs, etc. Il permet aux composants de communiquer et de partager des données en temps réel.
Vous pouvez utiliser les fonctionnalités de liaison bidirectionnelle dans différentes parties d'une application. Une fois que vous avez reçu les données de l'utilisateur, vous pouvez exécuter la logique métier et informer l'utilisateur des résultats.
Parfois, vous souhaitez stocker les données de l'utilisateur dans une base de données. Vous pouvez explorer différents types de fournisseurs de bases de données que vous pouvez utiliser, y compris la base de données Firebase NoSQL.