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

Question

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

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

结果是：

谢谢

Answer 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