如何获取嵌套 formBuilder 组的值答案

【问题标题】：How do I get the value of a nested formBuilder group如何获取嵌套 formBuilder 组的值
【发布时间】：2017-04-17 12:21:39
【问题描述】：

我的嵌套表单目前是这样格式化的：

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

【问题讨论】：

angular.io/docs/ts/latest/api/forms/index/…
哦，谢谢！医生肯定有帮助。文档中的这个例子真的很有帮助：this.form.get(['person', 'name']);

标签： forms angular typescript

【解决方案1】：

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

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

或

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

任何一个都有效。

【讨论】：

【解决方案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

【讨论】：

【解决方案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;

【讨论】：

那是我的严重错误......如果你有嵌套的formGroup，你可以像this.layerSettingsForm.get('name.styleName').value);

【解决方案4】：

试试：

let userId = this.form.value.id

【讨论】：

【解决方案5】：

旧帖子，但刚刚找到了不同的解决方案。

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

如果 user 未定义或为 null，则 userName 在结果上也将为 null 而不会崩溃。

【讨论】：

【解决方案6】：

在 Angualr 8 中，在 HTML 模板中：

form.get('user').get('id')

【讨论】：

【解决方案7】：

试试这个

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

这个想法基本上适用于任何嵌套表单

【讨论】：

【解决方案8】：

这对我有用

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

【讨论】：