Differences between value and ngValue in Angular 5

Question

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" i

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

Its ok to use valueor ngValue.

The only difference between two is that value is always string, where in ngValue you can pass object

Answer 5

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>