0

I need to use the NgSelect drop down for PO. And I used the below codes.

TS

In .ts file I declare the form Group as below,

  createForm() {
    this.poFormGroup = this.fb.group({
      purchaseOrderId: ['0',[]],
   });
  }

I should pass the default value in purchaseOrderId.

I get the value using the below method,

  getAllPurchaseOrders() {
    this.purchaseOrderService.getAllPurchaseOrders().subscribe(
    data => {
       this.purchaseOrder = data;
    });
  }

HTML

    <ng-select [items]="purchaseOrder" bindLabel="referenceNumber"
    bindValue="id" placeholder="Select PO" clearAllText="Clear" 
    formControlName="purchaseOrderId>

        <ng-template ng-label-tmp let-item="item">
           <span [ngOptionHighlight]="search">{{item.purchaseOrderStatusName }}</span>
        </ng-template>
        <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
         <span [ngOptionHighlight]="search">{{item.purchaseOrderStatusName}}</span>
        </ng-template>
    </ng-select>

Now in UI , the dropdown seems like below.

enter image description here

While searching, I got the answer to solve this problem is passing null value in form group declaration.Like below

purchaseOrderId: [null,[]]

But I cant use this method. Because I have to pass the default value purchaseOrderId: ['0',[]]

Is there any other method to solve this problem?

Angel Reji
  • 533
  • 2
  • 11
  • 26

0 Answers0