Get property value inside of an object that is inside of FormControl in FormGroup and desplay it?

Question

I have an issue with form control. I created reactive form that has 2 controls. One is object, second one is formArray. When I bind "start" control to the html I get [Object Object] and i dont know how to fix it so it binds to address property of that object that is inside of start

I am binding it to primeng component p-dropdown

The result is:

Thanks

Answer 1

Set up your formGroup like below and create a getter to get the 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([])
  });
}

Then in your html you can bind to address like this

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

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