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

Below specified is my data

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

this will be the dropdown value below ill 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 how can i 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 didnt 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);

CodePudding user response：

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

CodePudding user response：

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));
  }

  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;
  }