title: adding nested field in angular reactive form
body: <p>I'm using <strong>Angular 6</strong> and have written API in <strong>Django</strong>.</p>
  
  <p>I have a <strong>Profile</strong> model serialized under <strong>User</strong> model.</p>
  
  <p>Using <strong>Postman</strong> I'm able to save records to <strong>Profile</strong> like</p>
  
  <pre><code># JSON
  {
      'name': 'John',
      'profile': {
         'about': 'About me string'
      }
  }
  
  # or form field
  name = 'John'
  profile.about = 'About me string'
  </code></pre>
  
  <p>Now, In Angular application, I am trying to send data in the same format described above to the endpoint. For that, the formGroup is like</p>
  
  <pre><code>this.aboutForm = this.fb.group({
    profile: this.fb.group({
      about: new FormControl('', [
          Validators.required
      ])
    })
  });
  </code></pre>
  
  <p>And when the HTML form be like</p>
  
  <pre><code>&lt;form [formGroup]="aboutForm" (submit)="submit()" #form="ngForm"&gt;
      &lt;textarea formControlName="profile.about"&gt;&lt;/textarea&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But this is giving error as</p>
  
  <pre><code>error service Error: "Cannot find control with name: 'profile.about'"
  </code></pre>