Heute habe ich ein unerwartetes (für mich) Verhalten der reaktiven Formulare in Angular 5 festgestellt. Der Server hat von der App eine Zeichenfolge mit dem Wert "null" anstelle des Nullwerts erhalten, was ich wollte.

Ich habe folgenden Test gemacht:

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

Wie Sie im Bild unten sehen können, erhält das Feld "null" (Zeichenfolgenliteral) als Wert, wenn ich [value]="null" in der Auswahl verwende. Wenn ich jedoch [ngValue]="null" verwende, wird der erwartete Wert null angezeigt.

enter image description here

Ich dachte, dass die Verwendung von value für reaktive Formulare gedacht ist, während ngValue für vorlagengesteuerte Formulare gedacht ist. Ich würde gerne wissen, ob es sicher ist, beide in meinen Formularen zu verwenden (ich verwende immer reaktive Formulare) und ob es eine Erklärung für das unterschiedliche Verhalten gibt.

Vielen Dank!

55
Fel 19 Apr. 2018 im 13:22

5 Antworten

Beste Antwort

Es ist in Ordnung, value oder ngValue zu verwenden.

Der einzige Unterschied zwischen zwei besteht darin, dass value immer eine Zeichenfolge ist, wobei Sie in ngValue ein Objekt übergeben können

64
Miran Parkar 19 Apr. 2018 im 12:55

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

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

Wenn Sie [value] verwenden, wenn eine der Optionen ausgewählt ist, lautet der Wert foo, bar, baz

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

Wenn Sie [ngValue] verwenden, wenn eine der Optionen ausgewählt ist, lautet der Wert 0: foo, 1: bar, 2: baz

9
Adrita Sharma 10 Mai 2019 im 20:08

NgValue ist nützlich, wenn Sie an ein Objekt in der Objektsammlung binden müssen, anstatt an eine Zeichenfolge, die vom Optionselement als Beispiel wie folgt angezeigt wird.

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

Wo

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

SelectedColor ist eines der oben genannten Farbobjekte.

3
Ira 15 Dez. 2019 im 13:54

Es gibt keinen großen Unterschied zwischen value und ngValue.

Der einzige Unterschied ist, dass

Wenn Sie String als Eingabe haben, verwenden Sie value und

Wenn Object als Eingabe verwendet wird, verwenden Sie ngValue .

2
Deva 21 Aug. 2019 im 10:35

value muss eine Zeichenfolge sein, aber ngValue - ist das, was Sie wollen. Der Wert wird nicht an die Auswahlliste gebunden, wenn der Werttyp int not string ist.

1
Abdus Salam Azad 7 Feb. 2019 im 10:01