Различия между value и ngValue в Angular 5

Сегодня я узнал о неожиданном (для меня) поведении реактивных форм в Angular 5. Сервер получал от приложения строку со значением null вместо значения null, чего я и хотел.

Я сделал следующий тест:

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

Как вы можете видеть на рисунке ниже, если я использую [value]="null" в выборе, поле получает значение null (строковый литерал). Однако, если я использую [ngValue]="null", он получит ожидаемое значение null.

введите описание изображения здесь

Я думал, что использование value предназначено для реактивных форм, а ngValue - для форм, управляемых шаблонами. Я хотел бы знать, безопасно ли использовать оба в моих формах (я всегда использую реактивные формы) и есть ли какое-либо объяснение различного поведения.

Спасибо!


angular angular-forms
person Fel    schedule 19.04.2018    source источник
comment
значение всегда будет строкой, ngValue может быть объектом или чем угодно   -  person Eliseo    schedule 19.04.2018
comment
Итак, учитывая эту разницу, я предполагаю, что можно использовать value или ngValue в реактивных формах, не так ли?   -  person Fel    schedule 19.04.2018

Ответы (5)


arrow_upward
107
arrow_downward

Можно использовать value или ngValue.

Единственное различие между ними состоит в том, что value всегда является строкой, а в ngValue вы можете передать объект

person Miran Parkar    schedule 19.04.2018
comment
спасибо, я мог получить это из документов angular.io/api/forms/NgSelectOption +1 - person Omar Isaid; 13.08.2018

arrow_upward
15
arrow_downward

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

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

используя [value], когда выбран один из параметров, значение будет foo, bar, baz

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

используя [ngValue], когда выбран один из параметров, значение будет 0: foo, 1: bar, 2: baz

person Ryan Efendy    schedule 02.10.2018

arrow_upward
6
arrow_downward

ngValue полезен, когда вам нужно привязать к объекту в коллекции объектов вместо строки, которая отображается элементом option в качестве примера следующим образом.

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

куда

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

selectedColor - один из цветных объектов выше.

person Ira    schedule 15.12.2019

arrow_upward
4
arrow_downward

нет большой разницы между значением и ngValue.

Единственная разница в том, что

если в качестве входных данных используется String, используйте value и

когда Object в качестве входных данных, используйте ngValue.

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

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

arrow_upward
3
arrow_downward

value должен быть строкой, но ngValue- это все, что вы хотите. Значение не будет привязано к списку выбора, если тип значения - int, а не строка.

person Abdus Salam Azad    schedule 07.02.2019