Reputation: 141
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"
}
]
Upvotes: 0
Views: 79
Reputation: 4238
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>
Upvotes: 1