Группа форм для N одинаковых элементов

Question

У меня есть служба, которая возвращает N "вопросов" объекта. Мне нужно создать N formgroup с 3 formcontrol. Проблема в том, что, когда я создаю свои формы, они остаются одинаковыми. Если я изменю значение из первого formControlName, оно изменится и для другого первого formControlName

Typescript:

createFormQuestions(questions ?: Question[]) {
  for (let i = 0; i < questions.length; i++) {
    this.formQuestion = this.formBuilder.group({
      parameter1: [null, Validators.required],
      parameter2: [null, Validators.required],
      parameter3: [null, Validators.required],
    });
    this.questionsFormArray.push(this.formQuestion);
  }
}

HTML:

<accordion-tab *ngFor="let question of questionsItems; let i = index;" class="mb-2" id="lazyAccordionTab-{{i}}">
    <form [formGroup]="formQuestion" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div *ngIf="domanda" class="row w-100 mt-2">
            <!-- input  parameter 1 -->
            <div *ngIf="question.parameter1" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 form-group">
                <input formControlName="parameter1" class="questionario-input-border form-control" type="text">
            </div>
            <!-- input  parameter 2 -->
            <div *ngIf="question.parameter2" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 form-group">
                <input formControlName="parameter2" class="questionario-input-border form-control" type="text">
            </div>
            <!-- input  parameter 3 -->
            <div *ngIf="question.parameter3" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 form-group">
                <input formControlName="parameter3" class="questionario-input-border form-control" type="text">
            </div>
        </div>
    </form>
</accordion-tab>

Я могу ' К сожалению, я не добавляю stackblitz.

Answer 1

Вы должны создать экземпляр formarray из ваших вопросов json data. Используя FormArray, вы можете декларативно добавить новые поля формы или набор полей формы из источника данных Dynami c .

См. Измененный пример ниже (примечание: не проверено, но в идеале должно работать) есть.

<form [formGroup]="form">
  <div formArrayName="questionArr">
    <div *ngFor="let question of getQuestions.controls; let i=index" [formGroupName]="i">
      <mat-form-field appearance="legacy">
      <mat-label>Legacy form field</mat-label>
      <input matInput formControlName="parameter1">  
      </mat-form-field>
      ...............-> like that
    </div>
  </div>
</form>

Надеюсь, это поможет.