How to get Selected text of primeng dropdown on button click using angular2

Question

I am not able to get selected text of primeng dropdown on button click. i use formgroup to div and add multiple entries to grid. i tried a lot and get only selected value. i need dropdown label also. please help me. HTML markup:

<div class="row">
                <div class="form-group row" formGroupName="FarePaxDetails">
                    <label for="AirportName" class="col-sm-1 control-label">Pax Type</label>
                    <div class="col-sm-1">
                        <p-dropdown [options]="paxes" [(ngModel)]="PaxTypeId" (onChange)="ChangePaxType($event)" formControlName="PaxType"></p-dropdown>
                    </div>
                    <label for="AirportName" class="col-sm-2 control-label">Baggage Allow</label>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" formControlName="BeggageAllow" [(ngModel)]="BeggageAllow" placeholder="Baggage Allow" />
                    </div>
                    <label for="AirportName" class="col-sm-2 control-label">Adult Fare(%)</label>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" [(ngModel)]="Percentage" formControlName="Percentage" placeholder="Adult Fare(%)" />
                    </div>
                    <label for="AirportName" class="col-sm-1 control-label">Amount</label>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" [(ngModel)]="Amount" formControlName="Amount" placeholder="Amount" />
                    </div>
                    <div class="col-sm-1">
                        <button type="button" (click)="AddFarePaxType(FarePaxDetails)" pButton class="btn btn-info" label="Add"></button>
                    </div>
                </div>
            </div>

Here is the code in HTML component:

import { Component, ViewEncapsulation } from '@angular/core';

import { TabViewModule, CheckboxModule, DropdownModule, RadioButtonModule, SelectItem, FieldsetModule } from 'primeng/primeng';

import { Response } from '@angular/http';

import { PayTypeService } from '../../Service/PaxTypeService';

import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';

import { DataTableModule, SharedModule, LazyLoadEvent, DataTable, ConfirmDialogModule, ConfirmationService } from 'primeng/primeng';
@Component({

    selector: 'main-fairtype',
    templateUrl: './mainfaretype.component.html',
    styleUrls: ['./mainfaretype.component.css'],
    encapsulation: ViewEncapsulation.None,
    providers: [PayTypeService]
})

export class MainFareTypeComponent {    

    paxes: SelectItem[];

    PaxFareTypeList: any[];

    public mainForm: FormGroup;

    constructor(private PayTypeService: PayTypeService) {
        this.mainForm = new FormGroup({
        FareType: new FormControl('', [Validators.required]),
        FareColor: new FormControl(''),
        TourCode: new FormControl('', [Validators.required]),
        FareBasis: new FormControl('', [Validators.required]),
        MinStay: new FormControl('', [Validators.required]),
        MaxStay: new FormControl('', [Validators.required]),
        TicketBefore: new FormControl('', [Validators.required]),
        ReservationBefore: new FormControl('', [Validators.required]),
        Restrictions: new FormControl(''),
        FareRule: new FormControl(''),
        FarePaxDetails: new FormGroup({
            PaxType: new FormControl('', [Validators.required]),
            BeggageAllow: new FormControl('', [Validators.required]),
            Percentage: new FormControl('', [Validators.required]),
            Amount: new FormControl('', [Validators.required])
        })
    });
    this.PayTypeService.GetAllPaxes().then((data: any) => {
        debugger
        this.paxes = [];
        for (var i = 0; i < data.length; i++)
            this.paxes.push({ label: data[i].paxTypeName, value: data[i].paxTypeId });
    });
    this.PaxFareTypeList = [];
}
AddFarePaxType(data: any) {
    this.PaxFareTypeList.push({
        PaxType: this.mainForm.controls.FarePaxDetails.get('PaxType').value,
        Baggage: this.mainForm.controls.FarePaxDetails.get('BeggageAllow').value,
        Percentage: this.mainForm.controls.FarePaxDetails.get('Percentage').value,
        Amount: this.mainForm.controls.FarePaxDetails.get('Amount').value
    })
}

Answer 1

I faced this problem and after brainstorming few hour I fixed using below hack.

Add a reference to your dropdown component and pass that to your "onChange" event handler something like below.

<p-dropdown #dd [options]="paxes" [(ngModel)]="PaxTypeId" (onChange)="ChangePaxType($event, dd)"
                formControlName="PaxType"></p-dropdown>

ChangePaxType(event, dd: Dropdown){
   console.log(dd.selectedOption.label) // this is your selected item label
}

This is the only way and works!

Answer 2

Try this:

<div formGroupName="FarePaxDetails">
<div class="col-sm-1">
    <p-dropdown [options]="paxes" [(ngModel)]="PaxTypeId" (onChange)="ChangePaxType($event)"
                formControlName="PaxType"></p-dropdown>
</div>
<label for="AirportName" class="col-sm-2 control-label">Baggage Allow</label>
<div class="col-sm-1">
    <input type="text" class="form-control" formControlName="BeggageAllow" [(ngModel)]="BeggageAllow"
           placeholder="Baggage Allow"/>
</div>
<label for="AirportName" class="col-sm-2 control-label">Adult Fare(%)</label>
<div class="col-sm-1">
    <input type="text" class="form-control" [(ngModel)]="Percentage" formControlName="Percentage"
           placeholder="Adult Fare(%)"/>
</div>
<label for="AirportName" class="col-sm-1 control-label">Amount</label>
<div class="col-sm-1">
    <input type="text" class="form-control" [(ngModel)]="Amount" formControlName="Amount" placeholder="Amount"/>
</div>
<div class="col-sm-1">
    <button type="button" (click)="AddFarePaxType(FarePaxDetails)" pButton class="btn btn-info"
            label="Add"></button>
</div>
</div>