Доступ к каждому экземпляру реактивной формы внутри ngfor в Angular

Question

Я ходил туда-сюда в течение нескольких часов, так как большинство ответов, которые я исследовал, включают вещи, которые я не хочу, такие как динамическое добавление полей. Все, что я хочу, - это иметь доступ к свойству каждого экземпляра формы. На данный момент он печатает только один экземпляр.

Вот блик стека: https://stackblitz.com/edit/angular-dzzzql

html

<section class="exercises">
  <form
    fxLayout="column"
    fxLayoutGap="2px"
    [formGroup]="exerciseForm"
    (ngSubmit)="onSubmit(exerciseForm.value)"
  >

    <ul *ngFor="let exercise of exercises">
      <li>{{ exercise.instruction }}</li>
      <ul *ngFor="let question of exercise.questions; let i = index">
        <li>
         {{ question.prefix }}
          <mat-form-field>
            <input
              name="answer"
              type="text"
              id="answer"
              matInput
              formControlName="answer">
          </mat-form-field>

          {{ question.sufix }} -
          {{ question.translation }}
        </li>
      </ul>
    </ul>
    <button type="submit" mat-raised-button color="primary">Submit</button>
  </form>
</section>

ts

exercises: Exercise[]=[
    new Exercise (
      'Answer this question',
      [new Question (1,'Eu','maluco','I am crazy'),
       new Question (2,'Eu','doidinho','I am cuckoo')],
    )]

constructor(private fb: FormBuilder) { }

exerciseForm = this.fb.group({
    answer:['']
  })
ngOnInit(): void {

  }

onSubmit(answer: Answer) {
  console.log(this.exerciseForm.value)
}
}

Answer 1

Просто сделайте formControlName в зависимости от index и получите его по имени из упражнение Form

[formControlName]="'answer_' + question.id"

Получить контроль:

this.exerciseForm.controls['answer_1']

ИЛИ

this.exerciseForm.get('answer_1')

Answer 2

Если вы используете тот же formcontrolName, то вы получите только последнее контрольное значение ..

Так как мы можем настроить ваш код ??

В app.component.ts

Изменение:

exerciseForm = this.fb.group({
    answer:['']
  })

Кому:

exerciseForm:FormGroup;

Просто инициализируйте здесь formgroup и не назначайте никаких значений на данный момент ..

Вам нужно добавить новую функцию для создания formGroup и вызвать ее внутри ngOnInit ловушки жизненного цикла.

ngOnInit(): void {
    this.createGroup()
}

Здесь для ранее назначенного this.exerciseForm необходимо назначить значение группы this.fb.group({});.

Затем вам нужно сформировать элементы управления для вопросов, представляющих собой массив, и вам нужно выполнить итерацию в ts как,

this.exercises[0].questions.forEach(control => ... )

Итак, внутри этого l oop, вам необходимо присвоить control каждому элементу соответственно, так как id является уникальным значением, вы можете задать его как элемент управления, как

this.exerciseForm.addControl(control.id, this.fb.control(''))

И функцию следующим образом:

  createGroup(){
    this.exerciseForm = this.fb.group({});
    this.exercises[0].questions.forEach(control => 
      this.exerciseForm.addControl(control.id, this.fb.control(''))
    );
    return this.exerciseForm;
  }

И в app.component.html только одно изменение (присвоение уникального formcontrolname)

Изменение,

formControlName="answer"

На

[formControlName]="question.id"

Разветвленный стек-блиц H до ..