获取FormGroup中FormControl内部的对象内部的属性值并显示它？

【问题标题】：Get property value inside of an object that is inside of FormControl in FormGroup and desplay it?获取FormGroup中FormControl内部的对象内部的属性值并显示它？
【发布时间】：2021-09-17 04:15:59
【问题描述】：

我对表单控制有疑问。我创建了具有 2 个控件的反应式表单。一个是对象，第二个是formArray。当我将“开始”控件绑定到 html 时，我得到 [Object Object]，但我不知道如何修复它，所以它绑定到 start 内的那个对象的地址属性

我将它绑定到primeng组件p-dropdown

结果是：

谢谢

【问题讨论】：

请查看How to Ask，请勿发布代码图片，而是添加为代码块

标签： angular forms angular-reactive-forms form-control formgroups

【解决方案1】：

如下所示设置您的 formGroup 并创建一个 getter 以获取 formGroup 'start'

public get startForm(): FormGroup {
  return this.routesForm.get('start') as FormGroup;
}

initForm() {
  this.routesForm = this.fb.group({
    start: this.fb.group({
      address: [null],
      latitude: [0],
      longitude: [0]
    }),
    stops: this.fb.array([])
  });
}

然后在你的html中你可以绑定到这样的地址

<div [formGroup]="routesForm">
  <div [formGroup]="startForm">
    <input type="text" formControlName="address"/>
  </div>
</div>

演示：https://stackblitz.com/edit/angular-formgroup-with-subgroup-akesh?file=src%2Fapp%2Fapp.component.ts

【讨论】：