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.
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?