Nested form groups in angular 4

Question

I am having the form group like

this.PatientInfo = this.fb.group({
      PatientID: [0],
      Gender: '',      
      Name:'',
      Employer: this.fb.group({
        EmployerID: 0,
        Name: [''],
        EmployerAddresses: this.fb.group({
          Address1: [''],
          Address2: [''],
          CityName: [''],          
          District: [''],
          StateName: [''],          
          PostalCode: [''],
          Country: ['']
        })
      })
    });

And i am binding the data like

<div class="col-md-3" formGroupName="EmployerAddresses">
    <div class="form-group form-group-default">
        <label class="control-label">State</label>
        <div class="input-group">
            <input type="text" class="form-control" formControlName="StateCode">
        </div>
    </div>
 </div>

On top i kept the formgroup as PatientInfo.

Here i am getting the error "cannot find the control with name EmployerAddresses".

Can you please anyone help on this. Thanks in advance.

Answer 1

This code solved my issue.

this.PatientInfo = this.fb.group({
  PatientID: [0],
  Gender: '',      
  Name:'',
  Employer: this.fb.group({
    EmployerID: 0,
    Name: [''],
    EmployerAddresses: this.fb.group({
      Address1: [''],
      Address2: [''],
      CityName: [''],          
      District: [''],
      StateName: [''], 
      StateCode: [''],
      PostalCode: [''],
      Country: ['']
    })
  })
});

<div class="col-md-3" formGroupName="Employer">
  <div class="form-group form-group-default" formGroupName="EmployerAddresses">
      <label class="control-label">State</label>
      <div class="input-group">
          <input type="text" class="form-control" formControlName="StateCode">
      </div>
  </div>
</div>

Thank you...