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

Question

我能够按照以下代码创建嵌套表单(无提交功能(：https://plnkr.co/edit/vSODkb8i7o54X3fST9VF?p=preview

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

1. 应用组件.html：32 错误类型错误：无法读取未定义的属性"电子邮件">
2. 保存时，会创建一个新行，但不会创建相应的输入。

我已经创建了堆栈：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);
}

我该如何解决这个问题？

Answer 1

第

1 部分

您必须将表单中的Contract传递给onSubmit()函数。

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

此外，您会注意到我在"添加另一封电子邮件+"和"添加另一个联系人+"按钮中添加了type属性type="button"。这可以防止在单击这些按钮时触发 onSubmit(( 事件。

如果您删除我添加到按钮中的type属性，您会注意到每次单击其中任何一个时它们都会触发 onSubmit(( 事件。这是默认的 html 按钮行为。默认情况下，除非另有明确声明，否则所有按钮都是type="submit"的。MDN 文档：按钮元素

第 2 部分

您需要更新contract.service.ts以使用 Rxjs 主题。您原来的方法不起作用，因为您只发送了一次可观察对象。使用 Subject 时，您可以随着Contracts数组的增长或更新继续发送更新。

请参阅更新的StackBlitz，了解工作代码：

堆栈闪电战演示