($event.target.value)
<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 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>
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>
Hola, estoy usando Angular - node js - mysql... estoy haciendo un select dropdown de países, y después otro select de estados y así con municipios; esta info está en un DB de MySQL. el código funciona cuando obtengo la lista de los paises pero en onChangeCountry($event.target.value)
de mi HTML me da un valor UNDEFINED
, puedo entrar en el alert
de onChangeCountry()
pero el console.log(countryId)
muestra UNDEFINED.