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

The control 'search' is independent from 'orderItems'. Your autocomplete is inside of a ngFor that iterates over each orderItem. When inside of the iteration, you should access items contained within the object of orderItem. Basically, 'search' doesn't exist inside of orderItems. — Brian Smith
– Brian Smith, Commented Jun 26, 2021 at 2:53
@BrianSmith Thanks, Brian. Well noted. I thought the autocomplete is contained because it is inside of ngFor. So could you help me the codes working? — Ellen Mina Kim
– Ellen Mina Kim, Commented Jun 26, 2021 at 3:02
@BrianSmith Thanks you so much. stackblitz.com/edit/angular-ivy-somt3x?file=src/app/… — Ellen Mina Kim
– Ellen Mina Kim, Commented Jun 26, 2021 at 4:02
Your stackblitz wouldn't compile for me and had too many errors. I put this together as a example of how to set up the form array with a search control and put a control on the page. It should get you in the right direction. stackblitz.com/edit/… — Brian Smith
– Brian Smith, Commented Jun 26, 2021 at 4:37

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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related