title: correct way to offload part of a reactiveform to a child component in angular 5
body: <p>Given a form declaration that looks like this:</p>
  
  <pre><code>    this.form = this.fb.group({
          party: this.fb.group({
              name: [null, Validators.required],
              givenName: [null, Validators.required],
              surname: [null, Validators.required],
              address: [""],
          }),
          role: this.fb.group({
              mobile: [""],
              landline: [""],
              email: [null, (c: AbstractControl) =&gt; {
                  if (!c.value)
                      return null;
                  return Validators.email(c);
              }],
          })
      });
  </code></pre>
  
  <p>I would like to move the <code>party</code>form group to a new component, along with the validation / html etc.</p>
  
  <p>What is the correct way to initialise <code>this.form.party</code>, but pass it into a child component that will create the field and validators.</p>
  
  <pre><code>export class PartyDetailsComponent implements OnInit {
      @Input group: FormGroup; // somehow created in the parent control?
  
      constructor(
          private readonly fb: FormBuilder,
          private readonly logger: NGXLogger) {
      }
  
      ngOnInit() {
          // how would I assign this correctly to the parent `party`
          this.fb.group({
              name: [null, Validators.required],
              givenName: [null, Validators.required],
              surname: [null, Validators.required],
              address: [""],
          });
      };
  }
  </code></pre>