Récupérer la valeur d'un contrôle de formulaire

Maintenant que vos formulaires sont en place avec Angular, l'étape suivante consiste à accéder aux valeurs des contrôles de formulaire.

Dans cette activité, vous allez apprendre à récupérer la valeur du champ de votre formulaire.

1. Afficher la valeur du champ dans le template

   Pour afficher la valeur du champ dans un template, vous pouvez utiliser la syntaxe d'interpolation {{}}, comme pour n'importe quelle autre propriété de la classe du composant :

   @Component({
     selector: 'app-user',
     template: `
       ...
       <p>Framework: {{ favoriteFramework }}</p>
       <label for="framework">
         Favorite Framework:
         <input id="framework" type="text" [(ngModel)]="favoriteFramework" />
       </label>
     `,
   })
   export class User {
     favoriteFramework = '';
   }

2. Récupérer la valeur d'un champ

   Lorsque vous avez besoin de faire référence à la valeur du champ dans la classe du composant, accédez à la propriété de la classe avec la syntaxe this.

   ...
   @Component({
     selector: 'app-user',
     template: `
       ...
       <button (click)="showFramework()">Show Framework</button>
     `,
     ...
   })
   export class User {
     favoriteFramework = '';
     ...
   
     showFramework() {
       alert(this.favoriteFramework);
     }
   }

Bravo, vous savez maintenant afficher les valeurs saisies dans votre template et y accéder depuis le code.

Passons à l'autre façon de gérer les formulaires avec Angular : les reactive forms. Pour en savoir plus sur les template-driven forms, consultez Créer un template-driven form.