Variables de référence du modèle ( #var )

Une variable de référence de modèle est souvent une référence à un élément DOM dans un modèle. Il peut également s'agir d'une référence à un composant Angular, à une directive ou à un composant Web.
Utilisez le symbole de hachage (#) pour déclarer une variable de référence.

src / app / app.component.html

Vous pouvez faire référence à une variable de référence de modèle n'importe où dans le modèle.

src / app / app.component.html


Comment une variable de référence obtient sa valeur

Dans la plupart des cas, Angular définit la valeur de la variable de référence sur l'élément sur lequel elle a été déclarée. Dans l'exemple précédent, phone fait référence à la zone de saisie du numéro de téléphone dans ‹input›. Le gestionnaire de clic du bouton transmet la valeur d'entrée à la méthode callPhone() du composant. Mais une directive peut changer ce comportement et définir la valeur sur quelque chose d'autre, tel que lui-même. C'est ce que fait la directive NgForm.

src / app / hero-form.component.html

Une variable de référence de modèle, heroForm apparaît trois fois dans cet exemple, séparée par une grande quantité de HTML. Quelle est la valeur de heroForm ?

Si Angular ne l'avait pas prise en charge lors de l'importation FormsModule, ce serait HTMLFormElement. Le heroForm est en fait une référence à une directive Angular NgForm avec la possibilité de suivre la valeur et la validité de chaque contrôle dans le formulaire.

L'élément natif ‹form› n'a pas de propriété form. Mais la directive NgForm le fait, ce qui explique comment vous pouvez désactiver le bouton d'envoi en cas d'invalidité heroForm.form.valid et transmettre l'intégralité de l'arborescence de contrôle de formulaire à la méthode onSubmit du composant parent.

Avertissements relatifs aux variables de référence de modèle

Une variable de référence de modèle ( #phone ) n'est pas la même chose qu'une variable d'entrée de modèle ( let phone ) telle que celle que vous pouvez voir dans un fichier *ngFor. Découvrez la différence dans le guide des directives structurelles.

La portée d'une variable de référence est le modèle entier. Ne définissez pas le même nom de variable plus d'une fois dans le même modèle. La valeur d'exécution sera imprévisible.

Vous pouvez utiliser le préfixe ( ref- ) alternatif à ( # ). Cet exemple déclare la variable fax comme ref-fax au lieu de #fax.

src / app / hero-form.component.html