Angular 7 select tag default option value issue

Question

First of all, hello everyone. Here is the issue: I have 2 select tag. The first select tag has 2 options tag: first option tag has a value used as a default value (kind of placeholder +> "select" or "choose" etc), and second option tag is a ngFor loop with some street names.

The second select tag has just one option tag with a ngFor loop displaying some city names.

Whenever i click on a city name, the street select tag display its street names inside a dropdown.

At the very beginning when the window is loaded, the default value option ("select") appears well by default but as soon as i choose a city option, the default value "select" of the street select tag, appears inside the dropdown list but the first index of the corresponding street list, appears as default.

It is really frustating i can't find the reason why.

 <select class="dropdown-select" formControlName="street-dd">
  <option class="dropdown-select" disabled selected [ngValue]="null">Select</option>
    <option class="dropdown-select"  *ngFor="let street of retrievedStreets">{{street}}</option>
</select>

<select class="dropdown-select"(change)="onCitySelected($event)" formControlName="city">
  <option class="dropdown-select" *ngFor="let city of retrievedCities" [value]="city['city']">{{city["city"]}}</option>
</select>

Here the TS file :

export class AddressComponent  {
  public retrievedCities: Array<any> = [];
  public retrievedStreets: Array<any> = [];

 private retrieveCities(cities: any) {
    this.retrievedCities = [];
    if (cities && cities.length > 0) {
      this.retrievedCities = cities;
    } 
  }

  public onCitySelected(city) {
    this.retrievedStreets = null;
      this.retrievedStreets = this.lookupStreets(city);
      console.log('retrieved street', this.retrievedStreets);
    this.retrievedStreets = this.retrievedStreets.sort();
  }

  private lookupStreets(city): Array<any> {
    return find(this.retrievedCities, {'city': city.target.value})['streets'];
  }
}

At the beginning there is no issue the default value is displayed as placeholder:

But then when i choose a value of the street select inside the dropdrown, and then click on another value of the city select, the first index of the street list appears as placeholder and "select" appears disabled inside the dropdown list :

nd when i click on the dropdown list of the Street i get:

Select //which is disabled
CH DU LAC-A-L'ORIGINAL // first index appears as default
RUE MAUDE
etc ...

How can i force the street select to put "select" as a default value placeholder each time i switch the city option ???

Thanks everyone

Youssef Harkati Youssef Harkati · Accepted Answer · 2018-11-27T12:03:05

Actually there is a solution :) Just need to reset the formcontrol in case of reactive forms:

this.yourFormGroup.get('nameOfYourFormControl').reset()

Then the default value will be picked up again.

Hope it helps someone someday

Angular 7 select tag default option value issue

1 Answers