title: How to properly use formGroupName in Angular forms
body: <h2>How do I correctly use the formGroupName inside a reactive form in Angular?</h2>
  
  <p>I'm not able to populate the data returned from Firebase on my form.</p>
  
  <p>You are correctly saving the data in the CloudFirestore, creating an array for address with values ​​inside.</p>
  
  <p>At the moment I'm doing the following:</p>
  
  <p><strong>myform.model.ts:</strong></p>
  
  <pre><code>export class People {
      name: string;
      city: string;
      postal_code: string;
  
  constructor(data?) {
  
     data = data || {}; // added this line
  
           // before executing the subscribe is coming undefined
           // and when I try to access data.adress.postal_code
           // there is an error saying that postal_code is undefined
  
           // is passing here twice, the first time comes undefined
  
           console.log (data.adress.postal_code); // undefined
  
           this.name = data.name || '';
           this.city = data.adress.city || '';
          this.postal_code = data.adress.postal_code || '';
  }
  
  }
  </code></pre>
  
  <p><strong>myform.component.ts:</strong></p>
  
  <pre><code>pageType: string;
  
  people = new People();
  onFormChanged: Subscription;
  form: FormGroup;
  
  ngOnInit() {
      // Subscribe to update form on changes
      this.onFormChanged =
          this.formService.onFormChanged
              .subscribe(data =&gt; {
  
                  // firebase return
                  if (data) {
                      this.people= new People(data);
                      this.pageType = 'edit';
                  }
                  else {
                      this.pageType = 'add';
                      this.people = new People();
                  }
  
                  this.form = this.createForm();
              });
  }
  
  createForm() {
      return this.formBuilder.group({
          name: [this.people.name, Validators.required],
  
          adress: this.formBuilder.group({
              postal_code: [this.people.postal_code],
              city: [this.people.city],
          }),
      });
  }
  </code></pre>
  
  <p><strong>myform.component.html:</strong></p>
  
  <pre><code>&lt;form name="form" [formGroup]="form"&gt;
  
  &lt;div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start"&gt;
      &lt;mat-form-field fxFlex="20"&gt;
         &lt;input matInput name="name" placeholder="Name" formControlName="name" required&gt;
      &lt;/mat-form-field&gt;
  &lt;/div&gt;
  
  &lt;div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start"&gt;
  
      &lt;mat-form-field fxFlex="20" formGroupName="adress"&gt;
          &lt;input matInput name="city" placeholder="City" formControlName="city"&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field fxFlex="20" formGroupName="adress"&gt;
          &lt;input matInput name="postal_code" placeholder="Postal code" formControlName="postal_code"&gt;
      &lt;/mat-form-field&gt;
  
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>The data returned from the firebase is:</p>
  
  <pre><code>{name: 'Person 1', adress: {city: 'City 1', postal_code: '2348917'}}
  </code></pre>
  
  <p>Just fill in name ... City and Zip code is not filling, What am I doing wrong?</p>