title: angular5 how to submit nested reactive form
body: <p>I was able to create nested forms (w/o submit function) by following this code: <a href="https://plnkr.co/edit/vSODkb8i7o54X3fST9VF?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/vSODkb8i7o54X3fST9VF?p=preview</a></p>
  
  <p>Now, I would like to submit the forms, however, having 2 types of errors:</p>
  
  <ol>
  <li>AppComponent.html:32 ERROR TypeError: Cannot read property 'emails' of undefined</li>
  <li>When saving, a new line is created, but the corresponding input is not. </li>
  </ol>
  
  <p>I've created the stackbliz: <a href="https://stackblitz.com/edit/angular-tqrest" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-tqrest</a></p>
  
  <p>app.component.ts</p>
  
  <pre><code>constructor(private fb: FormBuilder, 
    private contractService: ContractService) { 
  }
  
  ngOnInit() {
    this.contractService.getContracts().subscribe(contracts =&gt; {
      this.contracts = contracts;
  });
  
    this.trustForm = this.fb.group({
      contracts: this.fb.array([])
    });
  
    this.addContract();
  }
  
  initContract() {
    return this.fb.group({
      name: '',
      emails: this.fb.array([])
    });
  }
  
  addContract() {
    const contractArray = &lt;FormArray&gt;this.trustForm.controls['contracts'];
    const newContract = this.initContract();
  
    contractArray.push(newContract);
  }
  
  removeContract(idx: number) {
    const contractsArray = &lt;FormArray&gt;this.trustForm.controls['contracts'];
    contractsArray.removeAt(idx);
  }
  
  onSubmit(contract: Contract) {
    this.contractService.addContract(contract);
  }
  </code></pre>
  
  <p>How can I solve this?</p>