title: Angular: How do I deal with nested FormGroups in the HMLT Template?
body: <p>I'm very new to Angular and trying to build a form to collect user information.</p>
  <p>Let's say I have a user that can have a &quot;friend&quot; associated with them.  A simplified version of my FormGroup looks like this:</p>
  <pre><code>userInformation = new FormGroup({
     name: new FormControl('', [Validators.required]),
     age: new FormControl('', [Validators.required]),
     friend: new FormGroup({
        name: new FormControl('', [Validators.required]),
        age: new FormControl('', [Validators.required])
     })
  })
  </code></pre>
  <p>In my HTML, I have:</p>
  <pre><code>&lt;form [formGroup]=&quot;userInformation&quot; (ngSubmit)=&quot;onSubmit&quot;&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;full name&quot;&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;full name&quot;&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;full name&quot;&gt;
      &lt;input type=&quot;text&quot; placeholder=&quot;full name&quot;&gt;
  &lt;/form&gt;
  </code></pre>
  <p>How do I bind the first two inputs to the userInformation and the second two inputs to the userInformation.friend?</p>