Primeng Autocomplete - 不使用 Angular 中的反应形式修补值

Question

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.

Answer 1

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