title: Create a reusable FormGroup
body: <p>I am aware of creating custom <em>controls</em> as components, but I can't figure out how to create custom <em>groups</em>.</p>
  
  <p>The same we can do this by <a href="https://angular.io/api/forms/ControlValueAccessor" rel="noreferrer">implementing <code>ControlValueAccessor</code></a> and using a custom component like <code>&lt;my-cmp formControlName="foo"&gt;&lt;/my-cmp&gt;</code>, how can we achieve this effect for <a href="https://angular.io/api/forms/FormGroup" rel="noreferrer">a <strong>group</strong></a>?</p>
  
  <pre><code>&lt;my-cmp formGroupName="aGroup"&gt;&lt;/my-cmp&gt;
  </code></pre>
  
  <p>Two very common use-cases would be (a) separting a long form into steps, each step in a separate component and (b) encapsulating a group of fields which appear across multiple forms, such as address (group of country, state, city, address, building number) or date of birth (year, month, date).</p>
  
  <hr>
  
  <h1>Example usage (not actual working code)</h1>
  
  <p>Parent has the following form built with <a href="https://angular.io/api/forms/FormBuilder" rel="noreferrer"><code>FormBuilder</code></a>:</p>
  
  <pre><code>// parent model
  form = this.fb.group({
    username: '',
    fullName: '',
    password: '',
    address: this.fb.group({
      country: '',
      state: '',
      city: '',
      street: '',
      building: '',
    })
  })
  </code></pre>
  
  <p>Parent template (inaccessible and non-semantic for brevity):</p>
  
  <pre><code>&lt;!-- parent template --&gt;
  &lt;form [groupName]="form"&gt;
    &lt;input formControlName="username"&gt;
    &lt;input formControlName="fullName"&gt;
    &lt;input formControlName="password"&gt;
    &lt;address-form-group formGroup="address"&gt;&lt;/address-form-group&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Now this <code>AddressFormGroupComponent</code> knows how to handle a group which has these specific controls inside of it.</p>
  
  <pre><code>&lt;!-- child template --&gt;
  &lt;input formControlName="country"&gt;
  &lt;input formControlName="state"&gt;
  &lt;input formControlName="city"&gt;
  &lt;input formControlName="street"&gt;
  &lt;input formControlName="building"&gt;
  </code></pre>