Submit form formArray

Question

I got problem with formArray.. I want to submit formArray to backend but I got error Cannot find control with path: 'feedBackList -> scoring'. What should I do fix it this error from appear... What should I do fix it this error from appear... What should I do fix it this error from appear..

This my example code

html

<form (ngSubmit)="onSubmit()" [formGroup]="feedbackForm" (keydown.enter)="$event.preventDefault()">
    <div class="item_container__order_container" formArrayName="feedBackList"> 
     <ion-card>
        <ion-card-header>
          <ion-card-subtitle>1. How satisfied were you with our online menu?</ion-card-subtitle>
        </ion-card-header>
      
        <ion-card-content>
          <ion-checkbox formControlName="questionNo" checked="true" value="1"></ion-checkbox>
          <online-menu  formControlName="scoring"  [messages]="ratingStarts('scoring')"></online-menu>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>2. Online menu made it easy for me to handle my order</ion-card-subtitle>
        </ion-card-header>
      
        <ion-card-content>
          <ion-checkbox formControlName="questionNo" checked="true" value="2"></ion-checkbox>
          <handle-order  formControlName="scoring"  [messages]="ratingStarts('scoring')"></handle-order>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>3.How satisfied were you with your meal?</ion-card-subtitle>
        </ion-card-header>
      
        <ion-card-content>
          <ion-checkbox formControlName="questionNo" checked="true" value="3"></ion-checkbox>
          <input-stars formControlName="scoring"  [messages]="ratingStarts('scoring')"></input-stars>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>4.What could we improve in our cafe</ion-card-subtitle>
        </ion-card-header>
      
        <ion-card-content>
          <ion-checkbox formControlName="questionNo" checked="true" value="4"></ion-checkbox>
          <our-cafe formControlName="scoring"  [messages]="ratingStarts('scoring')"></our-cafe>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>5. How likely are you to recommend LeCyan Coffee House to a friend?</ion-card-subtitle>
        </ion-card-header>
      
        <ion-card-content>
          <ion-checkbox formControlName="questionNo" checked="true" value="5"></ion-checkbox>
          <recommend formControlName="scoring"  [messages]="ratingStarts('scoring')"></recommend>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>6. Would you ome to our cafe again?</ion-card-subtitle>
        </ion-card-header>
      
        <ion-card-content>
          <ion-checkbox formControlName="questionNo" checked="true" value="6"></ion-checkbox>
          <come-again formControlName="scoring"  [messages]="ratingStarts('scoring')"></come-again>
        </ion-card-content>
      </ion-card>
      <ion-card>
        <ion-card-header>
          <ion-card-subtitle>7. ,mind telling us your age?</ion-card-subtitle>
        </ion-card-header>
      
        <ion-card-content>
          <div class="d-inline-grid" formgroup="age">
            <ion-checkbox formControlName="questionNo" checked="true" value="7"></ion-checkbox>
            <input type="radio" formControlName="scoring" id="option1" autocomplete="off">
          <label for="option1" class="btn btn-secondary mb-2 mt-1 active">
             Under 18
          </label>

          <input type="radio" formControlName="scoring" id="option2" autocomplete="off">
          <label for="option2" class="btn btn-secondary mb-2 active">
            18 - 24 years old
          </label>

          <input type="radio" formControlName="scoring" id="option3" autocomplete="off" >
          <label for="option3" class="btn btn-secondary active">
            25 and over
          </label>
        </div>
        </ion-card-content>
      </ion-card>
    </div>
    <button type="submit">submit</button>
  </form>

component

feedbackForm = this.fb.group({
    feedBackList: this.fb.array([
      this.fb.control('')
    ])
  })

  get aliases() {
    return this.feedbackForm.get('feedBackList') as FormArray;
  }

  newFeedback(): FormGroup {
    return this.fb.group({
      questionNo: new FormControl,
      scoring: new FormControl,
    })
 }

I want to pass data like this example

"feedBackList" : [
        {
            "questionNo" : 1,
            "scoring" : "5"
        },
        {
            "questionNo" : 2,
            "scoring" : "5"
        },
        {
            "questionNo" : 3,
            "scoring" : "5"
        },
        {
            "questionNo" : 4,
            "scoring" : "4"
        },
        {
            "questionNo" : 5,
            "scoring" : "10"
        },
        {
            "questionNo" : 6,
            "scoring" : "1"
        },
        {
            "questionNo" : 7,
            "scoring" : "25 and over"
        }

    ]

Answer 1

You need to loop over your FormArray inside your template :

<div class="item_container__order_container" formArrayName="feedBackList">
<!-- loop over the formGroups inside your array -->
  <div *ngFor="let control of aliases.controls; index as i">
    <!-- reference each formGroup -->
    <div [formGroupName]="i">
      <!-- insert your actual form -->
    </div>
  </div>
</div>