Отформатируйте данные формы для отправки на сервер

Question

Это форма

 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"
  }
  ]
}

Answer 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 есть «samplesResult» (но это симптомы », поэтому правильным является:

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]
                   })
                   )
               }

Answer 2

Создайте всю форму с помощью FormBuilder. Кроме того, мне нравится разделять лог c создания объекта и его форму в другом классе, чтобы вы могли их повторно использовать, и не забывайте, что ваши интерфейсы всегда должны быть на месте:

    // 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)) : [])
        });
      }
    }

Итак, в ваш компонент, вам нужно только инициализировать форму участника:

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
        }
      ]
    }