How to clear other ng-select dependent dropdowns onChange using Angular

Question

Currently I am using Angular-12 ng-select dependent dropdown for nationality, state and town:

I have this Json response from the endpoint:

{
  "results": {
    "countries": [{
        "id": 1,
        "name": "Italy",
      },
      {
        "id": 2,
        "name": "Belgium",
      }
    ]
  }
}


{
  "results": {
    "states": [{
        "id": 1,
        "name": "Delta",
        "country_id": 1,
        "countries": {
          "id": 1,
          "name": "Belgium",
        }
      },
      {
        "id": 2,
        "name": "Napoli",
        "country_id": 2,
        "countries": {
          "id": 2,
          "name": "Italy",
        }
      }
    ]
  }
}

This is the component:

countries!: any[];
cstates!: any[];
cities!: any[];
country_id!: '';
state_id!: '';
city_id!: '';

ngOnInit(): void {
  this.loadAllParameters();
  this.loadCountryData(event);
  this.loadStateData(event);
  this.loadCityData(event);
}

loadAllParameters() {
  this.dataService.getDataParameters().subscribe(
    data => {
      this.countries = data.results.countries;
    }
  );
}

loadCountryData(event: any) {
  if (event) {
    this.country_id = event.id;
    this.cstatesService.getStatesByCountry(this.country_id).subscribe(
      (data) => {
        this.cstates = data.results.states;
        console.log(this.cstates);
      }
    );
  } else {
    this.country_id = '';
  }
}

loadStateData(event: any) {
  if (event) {
    this.state_id = event.id;
    this.citiesService.fetchCitiesByState(this.state_id).subscribe(
      (data) => {
        this.cities = data.results.cities;
      }
    );
  } else {
    this.state_id = '';
  }
}

loadCityData(event: any) {
  if (event) {
    this.city_id = event.id;
  } else {
    this.city_id = '';
  }
}

And here is the view (HTML):

<div class="row">
  <div class="col-md-12">
    <div class="row">
      <div class="col-12 col-md-4" *ngIf="countries.length > 0">
        <div class="form-group">
          <label for="country_id">Nationality:<span style="color:red;">*</span></label>
          <ng-select (change)="loadCountryData($event)" [items]="countries" [selectOnTab]="true" [searchable]="true" bindValue="id" bindLabel="name" placeholder="Select Nationality" [multiple]="false" [clearable]="true" required formControlName="country_id">
          </ng-select>
        </div>
      </div>
      <div class="col-12 col-md-4" *ngIf="cstates.length > 0">
        <div class="form-group">
          <label for="state_id">State of Origin:</label>
          <ng-select (change)="loadStateData($event)" [items]="cstates" [selectOnTab]="true" [searchable]="true" bindValue="id" bindLabel="name" placeholder="Select State of Origin" [multiple]="false" [clearable]="true" formControlName="state_id">
          </ng-select>
        </div>
      </div>
      <div class="col-12 col-md-4" *ngIf="cities.length > 0">
        <div class="form-group">
          <label for="city_id">Town:</label>
          <ng-select (change)="loadCityData($event)" [items]="cities" [selectOnTab]="true" [searchable]="true" bindValue="id" bindLabel="name" placeholder="Select Town" [multiple]="false" [clearable]="true" formControlName="city_id">
          </ng-select>
        </div>
      </div>
    </div>
  </div>
</div>

I observed that country onChange, the state and town(city) still retain initial value:

How do I when country is onChange first clear the values of states and cities before loading any data, and also, when states onChange first clear any value before loading cities(towns)?

Thank you

score 0 · Accepted Answer · answered Sep 01 '21 at 17:51

You have to explicity reset the value of the field you want to be resseted after you change state or to trigger it's onChange function.

Something like this might help:

    loadCountryData(event: any) {
  if (event) {
    this.country_id = event.id;
    this.cstatesService.getStatesByCountry(this.country_id).subscribe(
      (data) => {
        this.cstates = data.results.states;

    // New states data recieved, need to reset selected state
       this.state_id = null;

        console.log(this.cstates);
      }
    );
  } else {
    this.country_id = '';
  }
}

Else I suggest checking this page: How to clear ng-select selection for the specific way to clear it

How to clear other ng-select dependent dropdowns onChange using Angular

1 Answers1