格式化表单数据以发送到服务器答案

【问题标题】：Format the form data to send to the server格式化表单数据以发送到服务器
【发布时间】：2020-10-30 22:45:03
【问题描述】：

这是表格

 this.participantForm = this.fb.group({
      occupation: [null],
      occupationAddress: [null],
      symptoms: new FormArray([])
  })

这是用户在表单中选择选项后我得到的值，

  {
  "occupation": 2,
  "occupationAddress": "B23 IND",
  "symptoms": [
    "N",
    "Y",
    "Y"
  ]
}

还有一个数组，参与者表单中的症状值应该合并。

var data = [
  {
    "id": 8651,
    "value": "Abdominal pain"
  },
  {
    "id": 8646,
    "value": "Chest pain"
  },
  {
    "id": 8642,
    "value": "Cough"
  }
]

合并后，参与者表单数据将如下所示。这是保存时需要发送到服务器的格式。

  {
  "occupation": null,
  "occupationAddress": null,
  "symptomsResult": [
     {
    "symptomId": 8651,
    "symptomValue": "N"
  },
  {
    "symptomId": 8646,
    "symptomValue": "Y"
  },
  {
    "symptomId": 8642,
    "symptomValue": "Y"
  }
  ]
}

【问题讨论】：

标签： angular typescript angular8

【解决方案1】：

它只是使用索引的简单地图

const dataSend={...this.participantForm.value,
                   symptomsResult:this.data.map((data:any,index:number)=>(
                   {
                     symptomId:data.id
                     symptomValue:this.participantForm.value.symptoms[index]
                   })
                   )
               }

::glups:: 我错过了。我认为form.value有“symptomsResult”（但是是症状），所以正确的是：

const dataSend={occupation:this.participantForm.value.occupation,
                occupationAddress:this.participantForm.value.occupationAddress,
                symptomsResult:this.data.map((data:any,index:number)=>(
                   {
                     symptomId:data.id
                     symptomValue:this.participantForm.value.symptoms[index]
                   })
                   )
               }

【讨论】：

symptomsResult:this.data.map((data:any;index:number)=> ：在这一行出现这个错误...... .'number' 仅指一种类型，但在此处用作值。ts(2693)
对不起，是“，”，而不是“;”。但重要的是您了解该功能。我使用“扩展运算符”获取 this.participantForm.value 的所有属性（在我考虑到变量的名称未更正之后，并且在更新时没问题），但覆盖属性“symptomsResult”。属性症状结果是一个数组。你如何获得数组），使用映射转换数组“this.data”在一个具有两个属性的对象中：'symptomId'，获取“id”的值，和 symptonValue，获取数组的值

【解决方案2】：

使用FormBuilder 创建整个表单。另外，我喜欢将创建对象的逻辑和它们的表单放在不同的类中，以便您可以重用它们，并记住始终保持您的接口：

    // participant.ts
    export interface Participant {
      ocupation: string;
      ocupationAddress: string;
      symptoms: Symptom[];
    }

    // symptom.ts
    export interface Symptom {
      id: number;
      value: string;
      selected: boolean;
    }

    // symptoms-builder.ts
    export class SymptomsBuilder {
      static buildForm(fb: FormBuilder, symptom: Symptom) {
        return fb.group({
          id: fb.control(symptom.id),
          value: fb.control(symptom.value),
          selected: fb.control(false)
        });
      }
    }

    // participant-builder.ts
    export class ParticipantBuilder {
      static buildForm(fb: FormBuilder, symptoms: Symptom[]) {
        return fb.group({
          occupation: fb.control('', [Validators.required]),
          occupationAddress: fb.control('', [Validators.required]),
          symptoms: fb.array(symptoms ? symptoms.map(s => SymptomsBuilder.buildForm(fb, s)) : [])
        });
      }
    }

所以在你的组件中你只需要初始化 Participant 表单：

this.participantForm = ParticipantBuilder.buildForm(this.fb, symptoms);

完成表单后，您可以使用this.participantForm.value 获取数据，其类型为Participant：

    {
      "occupation": "2",
      "occupationAddress": "B23 IND",
      "symptoms": [
        {
          "id": 8651,
          "value": "Abdominal pain",
          "selected": false
        },
        {
          "id": 8646,
          "value": "Chest pain",
          "selected": true
        },
        {
          "id": 8642,
          "value": "Cough",
          "selected": true
        }
      ]
    }

【讨论】：