时间戳

首页 > 解决方案 > 使用 Angular 服务的反应式表单数据绑定

angular - 使用 Angular 服务的反应式表单数据绑定

问题描述

我有 5 个表格，所以我正在实施数据服务来连接它们。服务工作正常，我正在获取服务中的数据，但是当我从一页转到第二页并单击下一步时，我只会得到第二个表单数据，但我也想要第一个表单数据所以在最后阶段我可以发送所有收集到的数据到 API。这是我的代码

`import { Injectable } from '@angular/core';`
`import { AddBusinessMutation} from 'src/app/graphql'`
`import{FormGroup, FormControl, Validators,FormArray} from '@angular/forms'`

`@Injectable({
    providedIn: 'root'
})`
`export class AddbusinessService {`
    `business: AddBusinessMutation;`
    `businesses: [];`
    `setGeneralFormData(data) {`
        `// this.businesses = data.socialLinks;
        // this.business = data.frmData;`
        `console.log(data)
    }`
`constructor(){`
    `}`
`}`

标签： angularangular-servicesreactiveangular-service-worker

解决方案

我认为您应该将每个表单数据推送到businesses数组并将新属性附加到business对象

business: AddBusinessMutation;
businesses: any[] = [];
setGeneralFormData(data) {
  this.businesses.push(data.socialLinks)
  this.business = <AddBusinessMutation> Object.assign({}, this.business, data.frmData)
  console.log(data);
}

代替

setGeneralFormData(data) {
  this.businesses = data.socialLinks;
  this.business = data.frmData;
  console.log(data)
}

推荐阅读