How to set a default value for mat-select which is not available as option for the user?

463 Views Asked by At

I am implementing a mat-select control in a dialog. The options which are available depend on the browser language of the user. For example, if the browser language is german, only german options should be available.

This is how the mat-select control looks like in HTML:

<mat-select [formControlName]="options">
  <mat-option
    *ngFor="let option of filterOptionsByLanguage(parameter.options)"
    [value]="option.value"
  >
    {{ option.value }}
  </mat-option>
</mat-select>

To pre-select a value when the user opens the dialog, I simply call this.createForm.controls.options.setValue() with the currently selected value (stored in a SQL Server database).

My problem is that there is the possibility that the currently selected option is in a different language than the user's browser language. As this option will not be available to the user, I cannot pre-select it when the user opens the dialog.

Is there a way how I can pre-select such a value without allowing the user to also select it as an option? I basically want the value to be displayed only but as soon as the user selects something else, it is no longer available as an option. I want the control to behave like this so in case the user does not want to select another value, the previously selected value will remain selected.

0

There are 0 best solutions below