反应式表单数据绑定 Angular 服务

Question

我有 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(){`
    `}`
`}`

Answer 1

我认为你应该将每个表单数据推送到 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)
}

Answer 2

你可以使用状态管理来存储表单数据

https://netbasal.com/connect-angular-forms-to-ngrx-store-c495d17e129

反应式表单数据绑定 Angular 服务

Reactive Form Data Binding with Angular Service

angular

angular-services

reactive

angular-service-worker