I am working on a combo box that allows users to enter text. My goal is to display a warning message when the user types something that does not match any of the options in the combo box selection. Below is the code for my combo box:
<mat-form-field appearance="outline" class="width-1">
<mat-label>Aircraft Type (ICAO)</mat-label>
<!-- test autocomplete aircraft type -->
<input
type="text"
placeholder="Aircraft Type (ICAO)"
aria-label="Aircraft Type (ICAO)"
matInput
formControlName="aircraftType"
[matAutocomplete]="type"
(input)="onAircraftTypeChange()"
/>
<span matSuffix class="down">
<mat-icon>arrow_drop_down</mat-icon>
</span>
<mat-autocomplete
#type="matAutocomplete"
(optionSelected)="onSelectAircraftType($event.option.value)"
[displayWith]="displayAircraftTypeFn"
>
<mat-option
*ngFor="let type of filteredAircraftTypes | async"
[value]="type"
>
{{ type.label }}
</mat-option>
</mat-autocomplete>
<!-- end test autocomplete -->
</mat-form-field>