Angular 6 - доступ к массиву в массиве из ReactiveForm

Question

У меня есть следующая форма

    this.questionForm = this.fb.group({
      title: [],
      questions: this.fb.array(
        [
          this.fb.group({
            question: [],
            answers: this.fb.array([this.fb.group({answer: ''})])
          })
        ]
      )
    });
  }

У меня нет проблем с циклом через вопросы.Однако я не совсем уверен, как я могу получить доступ к массиву ответов из моего шаблона.

это то, что у меня сейчас есть в моем шаблоне

<div formArrayName="questions">
  <div class="form-row" *ngFor="let question of questions.controls; let questionIndex=index" [formGroupName]="questionIndex">
    <button (click)="test(1)"></button>
    <div class="col">
      <textarea formControlName="question" class="form-control" placeholder="Enter your question here" rows="6"></textarea>
    </div>
    <div class="col">
      <!-- Here I want to loop trough the questions but i am not sure how-->
    </div>
  </div>
</div>

Так что я должен сделать, чтобы пройтись поответы?

Answer 1

Это просто зацикливание массива answers для каждого вопроса так же, как вы повторяете свои вопросы.В отличие от ответа Хусейна, я бы не стал вызывать функцию в итерации, так как она будет вызываться при каждом обнаружении изменений, которое часто , особенно когда вы можете иметь много привязок.Так что я бы сделал в шаблоне (сокращенный код) ...

<form [formGroup]="questionForm">
  <div formArrayName="questions">
    <div *ngFor="let quest of questionForm.get('questions').controls; let questionIndex=index" [formGroupName]="questionIndex">
      <textarea formControlName="question"></textarea>
      <div formArrayName="answers">
        <div *ngFor="let answ of quest.get('answers').controls; let i = index" [formGroupName]="i">
          <input formControlName="answer">
        </div>
      </div>
    </div>
  </div>
</form>

DEMO: StackBlitz

Answer 2

Вам понадобится FormArray в FormArray на экране.Должно быть что-то вроде этого:

<div formArrayName="questions">
    <div class="form-row" *ngFor="let question of questions.controls; let questionIndex=index" [formGroupName]="questionIndex">
        <button (click)="test(1)"></button>
        <div class="col">
            <textarea formControlName="question" class="form-control" placeholder="Enter your question here" rows="6"></textarea>
        </div>
        <div class="col" formArrayName="answers">
            <div class="form-row" *ngFor="let answer of getAnswers(question).controls; let j=index" [formGroupName]="j">
                <input type="text" formControlName="answer" />
            </div>
        </div>
    </div>
</div>

И getAnswers метод может выглядеть примерно так:

getAnswers(question): FormArray {
    const answers = question.get('answers') as FormArray;

    return answers;
}

Я не тестировал этот код, но вы обычно это делаетеэто.