CODEWITHSUNDEEP
angularangular-forms
Fel
Fel

Reputation: 4818

Differences between value and ngValue in Angular 5

Today I realized about an unexpected (for me) behaviour of the reactive forms in Angular 5. The server was receiving from the app an string with the value "null" instead of the null value, whichh is what I wanted.

I did the following test:

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

As you can see in the picture below, if I use [value]="null" in the select, the field is getting "null" (string literal) as value. However, if I use [ngValue]="null" it gets the expected null value.

enter image description here

I thought that using value was intended for reactive forms, while ngValue was for template driven forms. I'd like to know if it's safe to use both in my forms (I always use reactive forms) and if there's any explanation for the different behaviour.

Thanks!

Upvotes: 70

Views: 83883

Answers (6)

Miran Parkar
Miran Parkar

Reputation: 1583

It's ok to use value or ngValue.

The only difference between them is that value is always a string whereas for ngValue you can pass an object.

Upvotes: 144

wen
wen

Reputation: 41

for me I have a multiple select and had to change [value] to [ngValue] for the binding to correct show user preselected values.

Upvotes: 0

Deva
Deva

Reputation: 2121

there is no much diffrence between value or ngValue.

The only difference is that,

when you have String as input then use value and

when Object as input then use ngValue.

const colors= ["Red", "Green", "Blue"];

<option *ngFor="let color of colors" [value]="color">
    {{color}}
</option>

Upvotes: 7

Ira
Ira

Reputation: 764

ngValue is valuable when you need to bind to object in the object collection instead of string that is displayed by option element as an example as follows.

  <select [(ngModel)]='selectedColor'>
    <option *ngFor="let color of colors" [ngValue]="color"  >{{color.name}}</option>
  </select>

where 

  colors: [{code:'#FF0000', name:'Red'}, {code:'#00FF00', name:'Green'}, {code:'#0000FF', name:'Blue'}];

selectedColor is one of the color object above.

Upvotes: 9

nullify0844
nullify0844

Reputation: 5531

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

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

using [value] when one of the options is selected the value will be foo, bar, baz

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

using [ngValue] when one of the options is selected the value will be 0: foo, 1: bar, 2: baz

Upvotes: 25

Abdus Salam Azad
Abdus Salam Azad

Reputation: 5502

value must be string but ngValue- is whatever you want. Value will not bind to selectlist if value type is int not string.

Upvotes: 4

Related Questions