Q:

angular5 how to submit nested reactive form

I was able to create nested forms (w/o submit function) by following this code: https://plnkr.co/edit/vSODkb8i7o54X3fST9VF?p=preview
Now, I would like to submit the forms, however, having 2 types of errors:

AppComponent.html:32 ERROR TypeError: Cannot read property 'emails' of undefined
When saving, a new line is created, but the corresponding input is not. 

I've created the stackbliz: https://stackblitz.com/edit/angular-tqrest
app.component.ts
constructor(private fb: FormBuilder, 
  private contractService: ContractService) { 
}

ngOnInit() {
  this.contractService.getContracts().subscribe(contracts => {
    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 = <FormArray>this.trustForm.controls['contracts'];
  const newContract = this.initContract();

  contractArray.push(newContract);
}

removeContract(idx: number) {
  const contractsArray = <FormArray>this.trustForm.controls['contracts'];
  contractsArray.removeAt(idx);
}

onSubmit(contract: Contract) {
  this.contractService.addContract(contract);
}

How can I solve this?

A:

Part 1
You have to pass the Contract in the form to your onSubmit() function.
<form [formGroup]="trustForm" (ngSubmit)="onSubmit(trustForm.value.contracts)">

In addition, you will notice I added the type attribute type="button" to both your 'Add another email +' and 'Add another contact +' buttons. This prevents the onSubmit() event from firing when you click those buttons.
If you remove the type attributes I added to your buttons, you will notice they fire the onSubmit() event every time you click any of them. This is the default html button behavior. By default all buttons are of type="submit" unless explicitly declared otherwise. MDN Docs: The Button Element
Part 2
You will want to update your contract.service.ts to use Rxjs Subjects. Your original approach wouldn't work because you only sent the Observable one time. With the Subject you can continue to send updates as your Contracts array grows or is updated.
See the updated StackBlitz attached for the working code:
StackBlitz Demo

