2

($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.

3
  • 1
    Hi! Welcome to the spanish version of SO, you must translate your question to the lenguage of this site or your question will be removed
    – Capt.Teach
    Commented el 28 nov. 2019 a las 18:24
  • Te tengo la respuesta, pero serie bueno que tradujeras primero al español.
    – Legna
    Commented el 28 nov. 2019 a las 18:48
  • Gracias Angel... estoy entrando en el mundo de la programación y apenas vi que estoy en una sección en español.
    – Octavio
    Commented el 28 nov. 2019 a las 19:42

1 respuesta 1

1

En esta linea:

<option *ngFor="let state of states" [value]="stateId">{{state.stateName}}</option>

[value]="stateId" es indefinido por que no existe en ningun lado. Asumiendo que la estructura de de states contuviera Id esto [value]="stateId" debería ser [value]="state.Id".

Infiero que es un objeto por esta linea: {{state.stateName}}.

2
  • tengo una tabla de countries con countryId, countryName y countryKey, tengo otra tabla de states con stateId, stateName, stateKey y countryId, y otra de municipios. No creo que el nombre Id de stateId me afecte... o si? me viene la duda... pero ni siquiera llega a definir el countryId del primer select... imagino que si es correcto lo que me comentas, será el sieugiente problema.... pero ahorita mi inconveniente es conseguir countryId. También hay código que no coloqué para no hacerlo tan largo.
    – Octavio
    Commented el 28 nov. 2019 a las 19:57
  • Puedes publicar la la estructura de state?. Debe ser un objeto. Para poder darte una explicación mejor. Actualiza la pregunta con esos nuevos datos.
    – Legna
    Commented el 28 nov. 2019 a las 20:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.