создавать объекты на форме представить в машинописный угловой 7

Question

Я пытаюсь создать 2 отдельных объекта при отправке формы. Ниже мой код:

test.html

<form [formGroup]="gamificationForm" (ngSubmit)="onSubmit()">

<div *ngFor="let medal of medalResponse; let iMedal=index" class="row col-lg-12 mtop-custom-10 medal-level-point-config">
      <input type="hidden" class="point-text" [(ngModel)]="medal.medalId" formControlName="medalId" />
      <div class="col-lg-4 col-6">
        {{medal.medalName}}
        <input type="hidden" class="point-text" [(ngModel)]="medal.medalName" formControlName="medalName" />
      </div>
      <div class="col-lg-4 col-6">
        <input type="number" class="point-text" [(ngModel)]="medal.points" formControlName="points" />
      </div>
    </div>

<button class="custom-btn-class" name="submit" type="submit">Save</button>

</form>

Машинопись:

    gamificationForm = this.fb.group({
    medals: this.fb.group({
      medalId: [''],
      medalName: [''],
      points: ['']
    })
  });

onSubmit() {
    console.warn(this.gamificationForm.value);
}

JSON:

It is printing last values from the loop on html page and in json too.

Answer 1

К сожалению, я не сделал этого через Шаблонно-управляемые Формы, но вот мои идеи:

Вам нужно будет сгруппировать поля в массивы Level и Medal, поместив *ngFor в контейнер <ng-container formArrayName="Level"> и попробовать его.

Каждый *ngFor должен установить позицию FormArray, но вам нужно будет поэкспериментировать и посмотреть, подходит ли вам директива formArrayName.

Счастливого нг-кодирования!

Answer 2

Вы можете преобразовать это значение JSON в нужный вам формат,

format(value) {
  return [
     {
       Level: [
         {
          "levelId-0":value.levelId-0,
          "level-0":value.level-0,
          "points-0":value.points-0
         },
         ....
       ],
       Medal: [
         .....
       ]
     }
  ]
}