web-dev-qa-db-ja.com

ネストされたformBuilderグループの値を取得する方法

私のネストされたフォームは現在、次のようにフォーマットされています。

this.form = this.formBuilder.group({
      user:  this.formBuilder.group({
        id: ['', Validators.required],
        name: ['', Validators.required],
        phone: ['', Validators.required]
      })
})

通常、次のような値にアクセスします。

let userID = this.Form.controls['id'].value;
let userName = this.Form.controls['name'].value;
let userPhone = this.Form.controls['phone'].value;

しかし、formGroupsはネストされているため、ネストされた値にアクセスする方法がわかりません。私は試した：

let userName = this.Form.controls['user'].name;

ネストされたformGroupのフォームコントロール値にアクセスするための正しい構文は何ですか？ありがとう

formsangulartypescript
10
Xenohs

次の操作を行うことで、値にアクセスできました。

let userName = this.Form.controls['user'].value.name;

または

let userName = this.Form.get(['user','name']).value;

どちらかが動作します。

14
Xenohs

Angular 4+以降では、次のことができます。

const userName = this.form.get('user.name').value

実際には、ネストされたフォームの全長にわたって連鎖させることができます。例：

_this.form = this.formBuilder.group({
      parent:  this.formBuilder.group({
               child: this.formBuilder.group({
                      grandChild: this.formBuilder.group({
                                  grandGrandChild: ['',Validators.required],
                            }), 
                      }), 
               }),
})
_

そして、次のような値にアクセスします。

this.form.get('parent.child.gradChild.grandGrandChild').value

5
Meta Pakistani

これはAngular 6+では機能しません

this.form.get(['person', 'name']);

しかし、あなたは使用することができます

this.form.get('name').value;

ドキュメンテーションではgetメソッドが..

get(path: Array<string | number> | string): AbstractControl | null

私のミスをとても残念に思っています。次のようなものを使用して、ネストされたコントロールから値を取得できます。

this.layerSettingsForm.get('name.styleName').value;
3
Vladrimir Eryign

試してください：

let userId = this.form.value.id
2
rtn

古い投稿ですが、別の解決策を見つけました。

let userName = (this.Form.controls['user'] as FormGroup).controls['name'].value;

ユーザーが未定義またはnullの場合、userNameも結果でnullになり、クラッシュしません。

1
Jordec

これは私のために働いた

form.controls['workWeek'].value.dayGroup.fridayAM
0
apero

これを試して

const formValue = this.form.controls.user.controls;
let userId = formValue.id.value;
let userName = formValue.name.value;
let userPhone = formValue.phone.value;

このアイデアは基本的に、ネストされたフォームで機能します

0
Manav Kothari