Angular issue with 2 select options and default value

Question

I have an issue with a select input in angular 7. I have 2 select. When i choose an option of the second select, the list of its corresponding values are displayed in the upper select input. And there must be a default value displayed as if it is a placeholder ("select"). But the issue is when i switch from one value to the other on the second select, the placeholder ("select") in the first select becomes the first index value of the list:

<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 :

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

Select //which is disabled
CH DU LAC-A-L'ORIGINAL
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 ???

can you please show the ts file if possible? thanks

The Dead Man
– The Dead Man

2018-11-23 16:57:00 +00:00
Commented Nov 23, 2018 at 16:57 — The Dead Man
– The Dead Man, Commented Nov 23, 2018 at 16:57
i've updated the initial post. Thank you @user9964622

YoussHark
– YoussHark

2018-11-23 17:40:03 +00:00
Commented Nov 23, 2018 at 17:40 — YoussHark
– YoussHark, Commented Nov 23, 2018 at 17:40

YoussHark · Accepted Answer · 2018-11-27 01:05:47Z

1

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

answered Nov 27, 2018 at 1:05

YoussHark

6081 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular issue with 2 select options and default value

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related