Angular: как получить доступ к значению элементов управления во вложенных формах

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}}

имя и путь 1 работают нормально, где не работают "Way-2" и "Without get".

Пожалуйста, укажите мнемоя ошибка в коде.

код доступен на https://stackblitz.com/edit/angular-nestedformgroups

Answer 1

путь 3 должен быть без массива

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

Страна без Get может быть доступна через контроллеры

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

в шаблоне есть только небольшая ошибка. у вас должно быть Country вместо country, а также доступ через .controls Propery

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

Answer 2

Для страны без get: заменить "{{userForm.address.controls.country.value}}" на {{userForm.controls ['address']. Controls ['Country']. Value}}