angular5 如何提交嵌套的反应形式

Question

我能够通过以下代码创建嵌套表单（w/o 提交函数）：https://plnkr.co/edit/vSODkb8i7o54X3fST9VF?p=preview

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

AppComponent.html:32 错误类型错误：无法读取未定义的属性 'emails'
保存的时候新建了一行，但是没有对应的输入。

我创建了 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);
}

我该如何解决这个问题？

Answer 1

第 1 部分

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

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

此外，您会注意到我为您的 'Add another email +' 和 'Add another contact +' 按钮添加了 type 属性 type="button"。这可以防止在您单击这些按钮时触发 onSubmit() 事件。

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

第 2 部分

您需要更新 contract.service.ts 以使用 Rxjs 主题。您原来的方法行不通，因为您只发送了一次 Observable。使用主题，您可以在 Contracts 数组增长或更新时继续发送更新。

查看随附的更新后的 StackBlitz 工作代码：

StackBlitz Demo

angular5 如何提交嵌套的反应形式

angular5 how to submit nested reactive form

form-submit

nested-forms

angular

第 1 部分

第 2 部分