CODEWITHSUNDEEP
angularangular-reactive-formsformarrayangular2-formbuilder
Ellen Mina Kim
Ellen Mina Kim

Reputation: 71

ERROR Error: Cannot find control with path: Angular FormArray

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

Upvotes: 0

Views: 8339

Answers (1)

Brian Smith
Brian Smith

Reputation: 1656

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.

Upvotes: 1

Related Questions