web-dev-qa-db-fra.com

Différences entre value et ngValue dans Angular 5

Aujourd'hui, je me suis rendu compte d'un comportement inattendu (pour moi) des formes réactives dans Angular 5. Le serveur recevait de l'application une chaîne avec la valeur "null" au lieu de la valeur null, ce que je voulais.

J'ai fait le test suivant:

https://stackblitz.com/edit/angular-rjrspr?file=app%2Fapp.component.html

Comme vous pouvez le voir dans l'image ci-dessous, si j'utilise [value]="null" dans la sélection, le champ devient "null" (chaîne de caractères) en tant que valeur. Cependant, si j'utilise [ngValue]="null", il obtient la valeur null attendue.

 enter image description here

Je pensais que value était destiné aux formulaires réactifs, alors que ngValue était destiné aux formulaires basés sur des modèles. J'aimerais savoir s'il est prudent d'utiliser les deux dans mes formulaires (j'utilise toujours des formulaires réactifs) et s'il existe une explication pour le comportement différent.

Merci!

angularangular-forms
5
Fel

Son ok pour utiliser valueou ngValue.

La seule différence entre les deux est que value est toujours une chaîne, où dans ngValue vous pouvez passer un objet

20
Miran Parkar

const items = ["foo", "bar", "baz"] 

<option
    *ngFor="let item of items"
    [value]="item"
>
    {{item}}
</option>

en utilisant [value] lorsque l'une des options est sélectionnée, la valeur sera foo, bar, baz

<option
    *ngFor="let item of items"
    [ngValue]="item"
>
    {{item}}
</option>

en utilisant [ngValue] lorsque l'une des options est sélectionnée, la valeur sera 0: foo, 1: bar, 2: baz

1
Ryan Efendy

L'attribut value spécifie la valeur d'un élément. Ainsi, il sera toujours nul. DOM est une arborescence d'objet car [ngValue] est une directive angulaire qui donne un objet en tant que résultat.

Les formes réactives angulaires facilitent un style de programmation réactif qui favorise la gestion explicite des données circulant entre un modèle de données non-interface utilisateur (généralement extrait d'un serveur) et un modèle de formulaire orienté interface utilisateur qui conserve les états et les valeurs des contrôles HTML à l'écran. . Les formulaires réactifs offrent la facilité d'utilisation des modèles réactifs, des tests et de la validation.

Avec les formulaires réactifs, vous créez une arborescence d'objets de contrôle de formulaire angulaire dans la classe de composant et les liez aux éléments de contrôle de formulaire natifs du modèle de composant, à l'aide des techniques décrites dans ce guide.

Vous créez et manipulez des objets de contrôle de formulaire directement dans la classe de composant. La classe de composants ayant un accès immédiat au modèle de données et à la structure de contrôle de formulaire, vous pouvez insérer les valeurs du modèle de données dans les contrôles de formulaire et extraire les valeurs modifiées par l'utilisateur. Le composant peut observer les changements d'état de contrôle de formulaire et réagir à ces changements.

Vérifiez la doc angulaire pour plus d’informations: https://angular.io/guide/reactive-forms

1
Chellappan

value doit être une chaîne mais ngValue- est ce que vous voulez. La valeur ne sera pas liée à la liste de sélection si le type de valeur est int pas chaîne.

0
Abdus Salam Azad

il n'y a pas beaucoup de différence entre value et ngValue.

La seule différence est que lorsque vous avezString EN ENTR&EACUTE;E, UTILISEZ valueet lorsqueObject EN TANT QU'ENTR&EACUTE;E, UTILISEZ ngValue.

0
Deva