Angular 2の無効化されたコントロールはform.valueに含まれません


113

Angular 2反応フォームのコントロールを無効にすると、コントロールがform.valueに含まれないことに気付きました。たとえば、次のようにフォームを定義するとします。

this.notelinkingForm = new FormGroup({
    Enabled: new FormControl(settings.Enabled, Validators.required),
    LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required),
    LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required)
});

this.notelinkingForm.valueを確認します。すべてのコントロールが有効になっている場合、出力は次のようになります。

{"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"} 

ただし、一部のコントロールが無効になっている場合は、次のようになります。

{"Enabled":true} 

無効になっているコントロールがどのように除外されているかに注意してください。

私の意図は、フォームが変更されたときに、フォーム内のすべてのプロパティを含むform.valueを残りのAPIに渡せるようにすることです。無効なアイテムが含まれていない場合、これは明らかに不可能です。

ここに何か不足していますか、これは予想される動作ですか?Angularに無効なアイテムをform.valueに含めるように指示する方法はありますか?

あなたの考えを歓迎します。

回答:


246

以下を使用できます。

this.notelinkingForm.getRawValue()

ドキュメントから:

無効のステータスに関係なくすべての値を含める場合は、このメソッドを使用します。それ以外の場合、valueプロパティはグループの値を取得するための最良の方法です。


41
Angularチームがこれをなぜ地球上で行ったのか疑問に
無機物

@inorganik無効にされたコントロールを有効にしてその値を編集することが可能であるので、彼らはそれをしました。この場合、getRawValue()は改ざんされた値を持つオブジェクトを返します。
デンマーク、

1
これは実際には良いことです。たとえば、無効にしたコントロールの値は変更されないことがわかっているので、それらのコントロールにデータベースからの値を最初に割り当てたので、それらを保存APIに含めたくありません。しかし、場合によっては、実際にはフロントエンドから割り当てられた値を持ち、DBに格納されていないコントロールを含めたいと思います。この機能がそれをカバーしています。両方のオプションを持つことは常に良いことです。
ChiragMS

それは本当の@ChiragMSです。私は長いとしてその側面のように、私は間の選択を持っているようにreadonlyしてdisabled。ただし、以下の回答で説明するように、これはチェックボックスやラジオボタンなどには当てはまりません。それらのケースでは、データを別の方法で取得し、そのケース用に特別に何かをコーディングする必要があるのが気に入らなかった。
Sandro


7

必要なものを80%入手してくれて、@ Sasxaに感謝します。

同じ問題の解決策を探しているが、ネストされたフォームの場合は、いつもの方法を変更することで解決できました

this.notelinkingForm.get('nestedForm').value

this.notelinkingForm.getRawValue().nestedForm

0

readonly代わりに使用するとdisabled、データがフォームに含まれている間はまだ編集できません。しかし、それがすべての場合に可能であるわけではありません。たとえば、ラジオボタンやチェックボックスでは使用できません。MDN web docsを参照してください。そのような場合は、ここで提供されている他のソリューションに申し込む必要があります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.