angular - 如何在Angular 6中将一个组件的FormArray附加到另一个组件的值

Question

我想在两个组件之间使用相同的 FormArray 来保存数据。两个组件代码如下所示：

xyz.component.ts

createForm(data: any): FormGroup {
  return this.formBuilder.group({
    contractId: [data ? data.contractId : ''],
    contractName: [data ? data.contractName : '', Validators.required],
    contractServiceList: this.formBuilder.array(
      this.createContractService(data ? data.contractServiceList : null), this.arrayValidator()
    )
  });
}

createContractService(data: any[] | null): FormGroup[] {
  return data ?
    data.map(x => {
      let group = this.formBuilder.group({
        serviceId: [x.serviceId, Validators.required],
        copay: [x.copay, Validators.required],
        coinsurance: [x.coinsurance, Validators.required],
        deductibleApplies: [x.deductibleApplies, Validators.required],
        penaltyApplies: [x.penaltyApplies, Validators.required],
      });
      return group;
    }) : [this.formBuilder.group({
      serviceId: ['', Validators.required],
      copay: ['', Validators.required],
      coinsurance: ['', Validators.required],
      deductibleApplies: ['', Validators.required],
      penaltyApplies: ['', Validators.required],
    })];
}

abc.component.ts

createForm(data: any): FormGroup {
  return this.formBuilder.group({
    contractId: [data ? data.contractId : ''],
    contractName: [data ? data.contractName : ''],
    contractServiceList: this.formBuilder.array(
      this.createContractService(data ? data.contractServiceList : null), this.arrayValidator()
    )
  });
}

createContractService(data: any[] | null): FormGroup[] {
  return data ?
    data.map(x => {
      let group = this.formBuilder.group({
        penaltyRule: [x.penaltyRule, Validators.required],
        penaltyType: [x.penaltyType, Validators.required],
        penaltyValue: [x.penaltyValue, Validators.required],
        deductibleAppliesPenalty: [x.deductibleAppliesPenalty, Validators.required]
      });
      return group;
    }) : [this.formBuilder.group({
      penaltyRule: ['', Validators.required],
      penaltyType: ['', Validators.required],
      penaltyValue: ['', Validators.required],
      deductibleAppliesPenalty: ['', Validators.required]
    })];
}

Onclick 保存按钮，它导航到下一个组件，因此 FormArray 应该在第二个中附加值以及从第一个保存值之后。

标签： angularangular-ui-routerangular-reactive-forms