Martin,

There are a few possibilities for the cause here:

• My data is being populated dynamically from the back-end rather than being statically stored and reassigned in the UI, as with your example
• I am also filtering the data of the second dropdown based on correlative values within the object selected in the first dropdown
• I am assigning the first entry in either list initially (and when the modal is re-opened, effectively resetting its base values)

Here is a basic example of the data being presented for both lists:

public designs:{name:string, facilities:string, id:number}[] = []; //filled with back-end process
public facilities:{name:string, id:number}[] = []; //filled with back-end process
public filteredFacilities:{name:string, id:number}[] = []; //filled with filterFacilities below
public newDf:{design:string, facility:string}; // built initially from designs[0], filteredFacilities[0];

filterFacilities(design:string) {
    this.filteredFacilities = this.facilities.filter(a => this.designs.filter(d => d.name == design)[0].facilities.indexOf(a.name) > -1);
    this.newDf.facility = this.filteredFacilities[0].name;
    this.newDf.facilityId = this.filteredFacilities[0].id;
};

The [(ngModel)] for the dropdowns is the newDf (design for the design dropdown; facility for facility dropdown) and as mentioned, initial values are design[0] and filteredFacilities[0]. As design changes, filteredFacilities changes, but the first entry is always the initially selected value. This is because 90% of the time, the user will go with the first value in filteredFacilities.

The error happens when a Design is chosen that does not contain the previously selected value of the Facility dropdown.

Another issue I'm facing is that I am unable to concatenate for the initial display value of another dropdown that displays the list of available Design + Facility mappings:

public dfMappings: {design:string, facility:string, id:number}[] = []; //initialized by back-end process
public fromMapping: {design:string, facility:string, id:number}; //initialized as dfMappings[0]

I have tried the below in initializing the input's view (note, once dropdown is opened, all dfMappings show as "<design> for <facility>":

• {{fromMapping.design + ' for ' + fromMapping.facility}}
• {{fromMapping.design}} for {{fromMapping.facility}}
• {fromMapping.design}} + ' for ' + {{fromMapping.facility}}

I put the above as values for [value], using the (dropdown id) fromMap.selectedItem?.value notation for fromMapping and directly using fromMapping.

[(ngModel)]="fromMapping" and value passed to the input from the dropdown is a mapping of the same structure.