How can i get the value of a dropdown after it is selected

Question

Below specified is my data

Id , Name  , IsBillable
1    One       1
2    two       0
3.   three     0

this will be the dropdown value below i'll share the html dropdown code

<mat-option *ngFor="let option of masterAppointmentTypes" [value]="option.id">
                    {{option.value}}
 </mat-option>

the above html works. All i need to do is: get the IsBillable data at the below code

if(this.appointmentForm.get('id').value == this.appointmentForm.get('id').value && this.appointmentForm.get('IsBillable').value){
      this.openPaymentDialog(appointmentData, queryParams)
    }
    else{
      this.createAppointment(appointmentData, queryParams);
    }

at the above code i get the ID value according to the selected dropdown but i didn't get IsBillable data according to the selected id.Below code is my formBuilder.

const configControls = {
    
      'AppointmentTypeID': [appointmentObj.appointmentTypeID, Validators.required],
      'IsBillable' : [appointmentObj.isBillable,Validators.required],
    
      
    }
    this.appointmentForm = this.formBuilder.group(configControls);

are you using angular material `mat-select`? If so there is `selectionChange` https://material.angular.io/components/select/api. `(selectionChange)="callSomeFunction($event)"` — Andrew Allen, Nov 22 '22 at 12:45

score 0 · Answer 1 · answered Nov 22 '22 at 12:44

You don`t need the two formControls. you can do the following:

const configControls = {

  'AppointmentType': [appointmentObj, Validators.required],

}
this.appointmentForm = this.formBuilder.group(configControls);

then:

<mat-option *ngFor="let option of masterAppointmentTypes" [value]="option">
                    {{option.value}}
 </mat-option>

you should have what you want at:

this.appointmentForm.get('AppointmentType').value.IsBillable

The thing is, you were using a formControl to get the Id on the select, and it was doing that correctly, what it does not do is sync with the other form control to match the isBillable on select, that's just an initial value for the control, not a reference to be updated. That's why you have to get() the form control from the group and then access it's value to get what you want.

you can read more at: https://angular.io/guide/reactive-forms

the isBillable data is in your second formControl, i presume that form control must be bound to another input element, so in your code you would get that by this.appointmentForm.get('IsBillable').value. Assuming everything is wired up correctly. — Lucas Moreira, Nov 23 '22 at 13:29

Abdul Wasey · Answer 2 · 2022-11-24T13:07:05.087

0

It's a little bit tricky, please check the demo example

https://stackblitz.com/edit/angular-mat-select-example-kyjxuu?file=src/app/app.component.html

Html Part:

 <div style="padding: 20px">
  <h3>Value variable</h3>

  <mat-form-field>
    <mat-select #valueCountry>
      <mat-option *ngFor="let data of datas" [value]="data">
        {{ data.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div>
  Selected Id : {{ selectedData?.id }} <br />
  Selected Name : {{ selectedData?.name }} <br />Selected isBillable :
  {{ selectedData?.isBillable }}
</div>

Component Part:

@ViewChild('valueCountry') valueCountry: MatSelect;

  selectedData;

  constructor() {}

  ngOnInit() {
    this.valueCountry.selectionChange.subscribe(this.onChange.bind(this));
  }

  ngOnDestroy() {
    this.valueCountry.selectionChange.unsubscribe();
  }

  datas: any = [
    {
      id: 1,
      name: 'One',
      isBillable: true,
    },

    {
      id: 2,
      name: 'Two',
      isBillable: false,
    },

    {
      id: 3,
      name: 'Three',
      isBillable: false,
    },
  ];

  onChange(event) {
    this.selectedData = event.value;
  }

edited Nov 24 '22 at 13:07

answered Nov 22 '22 at 12:49

Abdul Wasey

71
4

1

remember to unsubscribe from dom event listeners using ngOnDestroy or you leave the subscription dangling causing a memory leak. https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription – Lucas Moreira Nov 22 '22 at 13:00
i got this error Cannot read properties of undefined (reading 'selectionChange') – Mike Micky Nov 23 '22 at 13:04
error is from in this line of code this.valueChanged.selectionChange.subscribe(this.onChange.bind(this)); – Mike Micky Nov 23 '22 at 13:16
i think you forget to add the @ViewChild('valueCountry') valueCountry: MatSelect; with type and please also confirm the angular material version – Abdul Wasey Nov 24 '22 at 13:01

How can i get the value of a dropdown after it is selected

2 Answers2