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

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

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

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

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

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

Спасибо!

Ответ 1

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

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

Ответ 2

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

Ответ 3

нет большого различия между значением или ngValue.

Разница лишь в том, что

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

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

Ответ 4

Атрибут value указывает значение element.so он всегда будет null.and DOM является деревом объекта, так как [ngValue] является угловой директивой, в результате он дает объект.

Угловые реактивные формы облегчают реактивный стиль программирования, который способствует явному управлению данными, проходящими между моделью данных, отличной от UI (обычно извлекаемой с сервера), и моделью, ориентированной на пользовательский интерфейс, которая сохраняет состояния и значения элементов управления HTML на экране, Реактивные формы обеспечивают простоту использования реактивных шаблонов, тестирования и проверки.

С реактивными формами вы создаете дерево объектов управления угловой формой в классе компонентов и привязываете их к элементам управления собственной формой в шаблоне компонента, используя методы, описанные в этом руководстве.

Вы создаете и управляете объектами управления формой непосредственно в классе компонентов. Поскольку класс компонента имеет непосредственный доступ как к модели данных, так и к структуре управления формой, вы можете вывести значения модели данных в элементы управления формы и вытащить измененные пользователем значения. Компонент может наблюдать изменения в состоянии контроля формы и реагировать на эти изменения.

Проверьте угловой документ для получения дополнительной информации: https://angular.io/guide/reactive-forms

Ответ 5

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