Angular : How to access the value of controls in nested forms

Question

我正在尝试在控制台和 HTML 中打印获取嵌套表单的表单控件的值。

userForm = new FormGroup({
    name: new FormControl("Tom Alter"),
    address: new FormGroup({
        Country: new FormControl("India"),
        State: new FormControl("Delhi")
    })
});

在这两种情况下，我都可以使用 get 语句找到值。

console.log ("name : ", this.userForm.controls.name.value);
console.log ("Country using Get Way 1  : ", this.userForm.get(['address', 'Country']).value) ;
console.log ("Country using Get Way 2 : ", this.userForm.get(['address']).get(['Country']).value);
console.log ("Country using Get Way 3 : ", this.userForm.get(['address.Country']).value);
console.log ("Country without Get: ", this.userForm.group.address.controls.cCountry.value);

在这些“Name”、“Way1”、“Way2”中，“Way 3”和“Without get”不起作用，因为它适用于“name”

在 HTML 中类似:

Name : {{userForm.controls.name.value}}
<br>
<br>
Country with get Way - 1 : {{userForm.get(['address']).get(['Country']).value}}
<br>
Country with get Way - 2 : {{userForm.get(['address','Country']).value}}
<br>
<br>
Country without get: {{userForm.address.controls.country.value}}

name 和 Way 1 工作正常，而“Way-2”和“Without get”不工作。

请指出我在代码中的错误。

代码可在 https://stackblitz.com/edit/angular-nestedformgroups 上找到

Answer 1

方式3应该没有数组

this.userForm.get('address.Country').value

没有Get的国家可以通过controlls访问

this.userForm.controls.address.controls.Country.value

模板中有一个小错误。你应该有 Country 而不是 country 并且还可以通过 .controls 属性访问

{{userForm.controls.address.controls.country.value}}