ERROR Error: Cannot find control with path: Angular FormArray

Question

I am making an anonymous formArray input(autocomplete) to find item by using autocomplete.

After adding an autocomplete, the autocomplete input doesn't work though it works fine independently.

The error message is ERROR Error: Cannot find control with path: 'orderItems -> 0 -> search'

Could you help me improve the codes?

Thank you.

 <form [formGroup]="orderForm">
    <div formArrayName="orderItems">
      <div *ngFor="let orderItem of getControls(); let i = index" [formGroupName]='i'>
        <p-autoComplete
        formControlName="search"
        (onSelect)="onSelect($event)"
        [suggestions]="list">
        </p-autoComplete>
      </div>
    </div>
    <p-button (click)="onAdd()"> add </p-button>
</form>

public orderItems = new FormArray([])
public orderForm: FormGroup;

ngOnInit(): void {
    this.orderForm = new FormGroup({
      'orderItems': this.orderItems,
      search: this.fb.array([
        this.fb.control('')
      ])
    });

    this.orderForm
    .get('search')
    .valueChanges.pipe(debounceTime(1000))
    .subscribe((value) => {
      if(value === '') {return null};
      this.getList(value)
    })
}

  getControls() {
    return (<FormArray>this.orderForm.get('orderItems'))
    .controls;
  }

  get search() {
    return this.orderForm.get('search') as FormArray;
  }

Answer 1

Set up your form initially with an empty array

buildForm() {
    this.orderForm = this.fb.group({
      orderItems: this.fb.array([]),
    });
  }

Then get the data for the array and populate the array

setOrderItemArray() {
    const orderItemsArray = this.orderForm.get('orderItems') as FormArray;
    this.orderItemsList.forEach(item => {
      orderItemsArray.push(this.buildOrderItemsForm(item))
    });
  }

  buildOrderItemsForm(item): FormGroup {
    return this.fb.group({
      id: item.id,
      search: item.search,
      name: item.name
    })
  }

Now you have an instance of 'search' in each object of the array and can use search autocomplete independently for each.