No value accessor for form control with name: 'time' angular 11 & primeng

I am trying to learn angular and I am working with form array in Angular 11 and primeNg. I created a form array and in this array I push form group. Form group controls are batchName and batchTime. I want to show some specific time through dropdown(primeNg dropdown). All work fine but in my console, I get an error

No value accessor for form control with name: 'time'
​

I try something like this

component.html

<div
class="col-12 p-1"
*ngFor="let control of feilds.controls; index as i"
>
<ng-container [formGroup]="control" class="w-100">
<div class="row align-items-center">
<div class="col-6 p-1">
<div class="form-group">
<label for="text">Batch Name</label>
<input
formControlName="name"
class="form-control"
placeholder="Batch Name"
type="text"
/>
</div>
</div>
<div class="col-5 p-1">
<div class="form-group">
<label for="time">Batch Time</label>
<p-dropdown
[options]="timing"
formControlName="time"
optionLabel="name"
id="time"
></p-dropdown>
</div>
</div>
<div class="col-1">
<div>
<button
pButton
pRipple
type="button"
icon="pi pi-trash"
class="p-button-rounded"
(click)="removeFeild(i)"
></button>
</div>
</div>
</div>
</ng-container>
</div



component.ts

feilds = new FormArray([]);
timing: string[] = [
'10:00Am',
'11:00Am',
'12:00',
'1:00Pm',
'2:00Pm',
'3:00Pm',
'4:00Pm',
'5:00Pm',
'6:00Pm',
'7:00Pm',
];

addFeild() {
const group = new FormGroup({
name: new FormControl('', Validators.required),
time: new FormControl('', Validators.required),
});
this.feilds.push(group);
}

removeFeild(index: number) {
this.feilds.removeAt(index);
}
prepend() {
const group = new FormGroup({
name: new FormControl('', Validators.required),
time: new FormControl('', Validators.required),
});
this.feilds.push(group);
}


Sorry if I do some stupid mistake

Continue reading...