提交表单formArray

问题描述

我遇到了formArray问题。我想将formArray提交给后端，但是出现错误Cannot find control with path: 'FeedBackList -> scoring'。我该怎么办才能解决此错误从出现...我该怎么办才能解决此错误从出现....我应该怎么办解决此错误从出现..

这是我的示例代码

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>

组件

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,})
 }

我想像这个例子一样传递数据

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

    ]

解决方法

您需要在模板内部遍历FormArray：

<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>