web-dev-qa-db-ja.com

Angular 5の値とngValueの違い

今日、私はAngular 5.のリアクティブフォームの予期しない（私にとっての）動作について理解しました。欲しかった。

私は次のテストを行いました：

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

下の図でわかるように、selectで[value]="null"を使用すると、フィールドは値として「null」（文字列リテラル）を取得します。ただし、[ngValue]="null"を使用すると、期待されるnull値を取得します。

enter image description here

valueの使用はリアクティブフォーム用であり、ngValueの使用はテンプレート駆動フォーム用であると考えました。私のフォーム（私は常にリアクティブフォームを使用します）と異なる動作の説明があるかどうかの両方で使用しても安全かどうかを知りたいです。

ありがとう！

angularangular-forms
15
Fel

valueまたはngValueを使用してもかまいません。

2つの唯一の違いは、valueは常に文字列であり、ngValueではオブジェクトを渡すことができることです。

45
Miran Parkar

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

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

[value]を使用すると、オプションの1つが選択されると、値はfoo、bar、bazになります。

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

[ngValue]を使用すると、オプションの1つが選択されると、値は0: foo、1: bar、2: bazになります。

6
Ryan Efendy

valueとngValueの間に大きな違いはありません。

唯一の違いは、

入力としてStringがある場合は、valueを使用します。

Objectを入力として使用する場合は、ngValueを使用します。

2
Deva

valueは文字列でなければなりませんが、ngValue-は任意です。値のタイプが文字列ではなく整数の場合、値はselectlistにバインドされません。

1
Abdus Salam Azad

Value属性はelement.soの値を指定します。常にnullになります。DOMはオブジェクトのツリーです。[ngValue]はangularディレクティブであるため、結果としてオブジェクトを提供します。

角度リアクティブフォームは、非UIデータモデル（通常はサーバーから取得）と、画面上のHTMLコントロールの状態と値を保持するUI指向のフォームモデルとの間を流れるデータの明示的な管理を促進するリアクティブスタイルのプログラミングを容易にします。リアクティブフォームを使用すると、リアクティブパターン、テスト、および検証を簡単に使用できます。

リアクティブフォームでは、このガイドで説明する手法を使用して、コンポーネントクラスでAngularフォームコントロールオブジェクトのツリーを作成し、コンポーネントテンプレートのネイティブフォームコントロール要素にバインドします。

コンポーネントクラスでフォームコントロールオブジェクトを直接作成および操作します。コンポーネントクラスはデータモデルとフォームコントロール構造の両方に即座にアクセスできるため、データモデル値をフォームコントロールにプッシュし、ユーザーが変更した値をプルアウトできます。コンポーネントは、フォームコントロールの状態の変化を観察し、それらの変化に対応できます。

詳細については、angular docを確認してください： https://angular.io/guide/reactive-forms

1
Chellappan