Get and show the FormArray values of reactive forms in a Div before submitting in POST Api-CodePudding

<div
  class="row"
  *ngFor="let mcq of mcqs().controls; let i = index;"
  [formGroupName]="i"
>
  <div class="col-lg-6">
    <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
      <mat-label>Question</mat-label>
      <textarea matInput formControlName="question"> </textarea>
    </mat-form-field>
  </div>
  <div class="col-lg-6">
    <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
      <mat-label>Answer</mat-label>
      <textarea matInput formControlName="answer"> </textarea>
    </mat-form-field>
    <input type="hidden" formControlname="question_type" />
    <input type="hidden" formControlname="_questionId" />
  </div>
</div>

From this FormArray i need to get values and show it in a DIV as a preview before posting to api

CodePudding user response：

In order to access the values of your FormArray, you can access the value property. You can also put it into a div element, but I recommend using pre instead (it looks a bit nicer):

<pre>{{ mcqs().value | json }}</pre>