CODEWITHSUNDEEP
angularautocompleteprimeng
Pankaj Bhandarkar
Pankaj Bhandarkar

Reputation: 498

Primeng Autocomplete - Not patching the value using reactive form in Angular

I have the latest version of Angular and using the autocomplete feature of Primeng and trying to patch the value after searching the match result using reactive form, but it is not reflecting , below is my code:

HTML Code:

<p-autoComplete formControlName="orderId" [suggestions]="orderList"
(completeMethod)="searchOrders($event)" (onSelect)="onOrderChange($event)" filter="label"
field="label" [autoHighlight]="true" [forceSelection]="true" dataKey="value">
</p-autoComplete>

TS Code:

searchOrders(event) {
    this._orderService.getOrderList(event.query).subscribe(
      success => {
        if (success['orders'].length) {
          this.orderList = success['orders']
          this.formGroup.patchValue({ orderId: { value: '6614876352770211840' } })
        }
      },
      error => {
        // handling errors here
      }
    )
  }

I have an array of object ([{value:'', label: ''}]) in orderList variable and list is properly showing there after search. onOrderChange method is not impacting on this logic, I also separately called the searchOrders method by passing the relative query and after that patch the value, I tried different ways, but it is not working.

Upvotes: 1

Views: 1414

Answers (1)

Pankaj Bhandarkar
Pankaj Bhandarkar

Reputation: 498

Finally, got the solution, it was easy but unexpected. We need to patch the field with object of key and value. This is required for Autocomplete and Chips Components of Primeng to display the pre-defined values ({ value: '6614876352770211840', label: 'ORD00459' }).
So the example is:

TS Code:

searchOrders(event) {
    this._orderService.getOrderList(event.query).subscribe(
      success => {
        if (success['orders'].length) {
          this.orderList = success['orders']
          this.formGroup.patchValue({ orderId: { value: '6614876352770211840', label: 'ORD00459' } })
        }
      },
      error => {
        // handling errors here
      }
    )
  }

Upvotes: 1

Related Questions