Почему ($ event.target.value) не получает информацию в Angular8 и MySQL?

urlDB = 'http://localhost:3000/';

getCountries() {
  return this.httpClient.get(`${this.urlDB}superadmin/getCountries`);
};

getStates(countryId: number) {
  return this.httpClient.get(`${this.urlDB}superadmin/getStates/${countryId}`);
}

onChangeCountry(countryId: number ) {
  if (countryId) {
    alert(countryId);               //the alert works, but the value of countryId is UNDEFINED
    this.countryStateCityService.getStates(countryId).subscribe(data => {
      this.states = data;
      this.municipalities = null;
    });
  } else {
    this.states = null;
    this.municipalities = null;
  }
}


urlDB = 'http://localhost:3000/';

  getCountries() {
return this.httpClient.get(`${this.urlDB}superadmin/getCountries`);
  };

  getStates(countryId: number) {
return this.httpClient.get(`${this.urlDB}superadmin/getStates/${countryId}`);
  }

  getMunicipalities(stateId: number) {
return this.httpClient.get(`${this.urlDB}superadmin/getMunicipalities/${stateId}`);
  }

<div class="control">
  <div class="select is-small is-fullwidth" [formGroup]="createAccountForm">
    <select class="form-control" name="ConContryName" formControlName="country"  (change)="onChangeCountry($event.target.value)">
      <option value="">Select Country...</option>
      <option *ngFor="let country of countries" [value]="countryId">{{country.countryName}}</option>
    </select>
  </div>
</div>

<div class="control">
  <div class="select is-small is-fullwidth" [formGroup]="createAccountForm">
    <select class="form-control" name="ConStateName" formControlName="state"  (change)="onChangeState($event.target.value)">
      <option value="">Select State...</option>
      <option *ngFor="let state of states" [value]="stateId">{{state.stateName}}</option>
    </select>
  </div>
</div>