angular5如何提交嵌套的反应式表单

我能够通过以下代码创建嵌套表单（不带提交功能）：

现在，我想提交表格，但是，有两种类型的错误：

AppComponent.html:32错误类型错误：无法读取未定义的属性“电子邮件”

保存时，会创建新行，但不会创建相应的输入 我创建了stackbliz：

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);
}

构造函数（私有fb:FormBuilder，
专用contractService:contractService{
}
恩戈尼尼特（）{
this.contractService.getContracts（）.subscribe（contracts=>{
本合同=合同；
});
this.trustForm=this.fb.group({
契约：this.fb.array（[]）
});
这个.addContract（）；
}
初始合同（）{
返回此.fb.group({
名称：“”，
电子邮件：this.fb.array（[]）
});
}
addContract（）{
const contractArray=this.trustForm.controls['contracts']；
const newContract=this.initContract（）；
contractArray.push（newContract）；
}
removeContract（idx:编号）{
const contractsArray=this.trustForm.controls['contracts']；
合同删除（idx）；
}
onSubmit（合同：合同）{
此.contractService.addContract（合同）；
}

如何解决这个问题？

第1部分 您必须将表单中的

合同

传递给

onSubmit（）

函数

<form [formGroup]="trustForm" (ngSubmit)="onSubmit(trustForm.value.contracts)">

此外，您会注意到我在“添加另一封电子邮件+”和“添加另一个联系人+”按钮中添加了

type

属性

type=“button”

。这可以防止在单击这些按钮时触发onSubmit（）事件

如果删除我添加到按钮中的

type

属性，您会注意到每次单击它们中的任何一个时，它们都会触发onSubmit（）事件。这是默认的html按钮行为。默认情况下，所有按钮均为

type=“submit”

，除非另有明确声明

第二部分 您需要更新您的

contract.service.ts

以使用Rxjs主题。您最初的方法不起作用，因为您只发送了一次可观察的。使用主题，您可以在

合同

数组增长或更新时继续发送更新

有关工作代码，请参见随附的更新StackBlitz：

---

非常感谢您的回答！！但是，最后一个问题是，“提交”按钮不是为了反映细节部分而提交的。我只是在提交后有一个空白的额外行，尝试了更多的方法，但仍然不工作。如果你能帮忙，我将不胜感激！更新：）如果有帮助，请标记答案。快乐编码！：）超级的！看起来像是一个未经勘探的地区。谢谢编码也很快乐！