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

Brian Smith · Accepted Answer · 2021-06-26 14:30:24Z

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.

edited Jun 26, 2021 at 14:30

answered Jun 26, 2021 at 14:12

Brian Smith

1,6661 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr. Jo Over a year ago

I'm still getting the error so for me it don't works.

Collectives™ on Stack Overflow

ERROR Error: Cannot find control with path: Angular FormArray

1 Answer 1

1 Comment

Your Answer

Collectives™ on Stack Overflow

ERROR Error: Cannot find control with path: Angular FormArray

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest