如何以 Reactive 形式获取 Angular Dropdown 的值

Question

I have a drop down (states) in Angular Reactive form, I am not sure how to get the value on change of the Drop down.

This is the Angular Code in HTML:

           <select 
                    formControlName="licensestate"
                    (change)="selectChangeHandler($event.target.value)"
                    label="Licensed State">
                <option>Licensed State</option>
                <option *ngFor="let state of (USAStates| enumKeyValue)"
                        [value]="state.key"> {{ state.value }}</option>
            </select>

and this is the Method is TS file, but even Console.log is not working, means the change method is not even calling this method:

public selectChangeHandler(event: any): void {
    console.log("test");
    console.log(event.target.value);
 }

Answer 1

Try like this:

  ngOnInit() {
    ...
    this.form.controls['licensestate'].valueChanges.subscribe((value) => {
        console.log(value);
    });
  }

Answer 2

Try (ngModelChange) instead of (change)

<select formControlName="licensestate" (ngModelChange)="selectChangeHandler($event)" label="Licensed State"> <option *ngFor="let state of (USAStates| enumKeyValue)" value="{{state.key}}">{{state.value}}</option> </select>