Primeng dropdown selected value not able to change from component

Question

I am new to using Primeng controls, I am facing issue with dropdown selected value as I am not able to change value from component code.

I have radio buttons on change of radio button I trying to change the dropdown value but I am not able to do that, here is code for component html and ts:

order.component.html

<form id="frm" [formGroup]="frmGroup">
    <div class=" card">
     <h5>PR to PO Form</h5>
     <div class="card-body">
        <div class="row p-fluid p-grid rowSpace" style="margin-top: 10px;">
            <div class="row">
            <div class="col-5 md:col-5">
              <div class="form-group">
                <h5>Conversion Type </h5>
                <div class="p-field-radiobutton" style="float: left;width: 50%;margin-top: 8px;">
                    <input type="radio" name="convertionType" id="radioPurchaseOrder" [(ngModel)]="selectedValue" 
                     (change)="ConversionTypeChanged($event)" style="width: 20%;height: 2em;">
                     <label for="radioPurchaseOrder" style="vertical-align: super;font-size: medium;">Purchase Order</label>
                </div>
                <div class="p-field-radiobutton" style="float: left;width: 50%;margin-top: 8px;position: relative;">
                    <input type="radio" name="convertionType" id="radioSalesOrder" [(ngModel)]="selectedValue" 
                     (change)="ConversionTypeChanged($event)" style="width: 20%;height: 2em;">
                     <label for="radioSalesOrder" style="vertical-align: super;font-size: medium;">Sales Order</label>
                </div>
              </div>
            </div>
            </div>
            <div class="row p-fluid p-grid rowSpace">
                <div class="field col-md-4">
                        <h5>Po Type</h5>
                        <span class="p-float-label" tabindex="6">
                            <p-dropdown  dataKey="value" formControlName="ddlPoTypes" class="p-inputtext-sm" inputId="ddlPoType" [options]="poType" optionLabel="name" optionValue="id">
                            </p-dropdown>
                        </span>
                </div>
             </div>
        </div>  
     </div>
    </div>
 </form>

and

order.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { map, Observable, ObservedValueOf, of } from 'rxjs';

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.scss']
})

export class orderComponent implements OnInit {
  frmGroup = this.formBuilder.group({
    ddlPoTypes:[''],
  });
  poType :any = [{name:'Car',value:'91'},{name:'Standard',value:'90'}];

  constructor(private formBuilder:FormBuilder) {  }
  ngOnInit(): void { 
  }

  ConversionTypeChanged(event:any){
    if(event.target.id==="radioSalesOrder"){
      const cars=this.poType.find(p=>p.value==='91');
      this.frmGroup.get('ddlPoTypes')?.setValue(cars?cars.value:'')
      console.log(this.frmGroup.controls.ddlPoTypes.value);
    }else{ 
      const std=this.poType.find(p=>p.value==='90');
      this.frmGroup.get('ddlPoTypes')?.setValue(std?std.value:'')
      console.log(this.frmGroup.controls.ddlPoTypes.value);
    }
  }
}

It is a reactive form and I created it on component as well

but on change of radio button the dropdown change not happening even if I only tried to get value of dropdown after changing the dropdown manually I am getting undefined.

Someone having better knowledge in prime ng controls plz help me out

Primeng dropdown selected value not able to change from component

0 Answers0