如何获取嵌套的formBuilder组的值

Question

我的嵌套表单目前以这种方式格式化:

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中访问表单控件值的正确语法是什么？谢谢

Answer 1

我可以通过执行以下操作来访问该值:

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

要么

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

两个都有效.

Answer 2

从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

Answer 3

这在 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;