How can I mask input for formControl name in HTML? When the autocomplete feature is displayed, only the airport's name is visible. After users select an airport, I want to show the airport's name in the input value but set the entire airport object as the formControl value. This way, when I perform a search, I have access to more than just a string for data retrieval.
<mat-form-field>
<input
matInput
formControlName="departure_airport"
#el_departure_input
class="[ flight-travel-form__airport__input ][ typography-sub-heading ]"
value=""
placeholder="Departure"
[matAutocomplete]="auto"
/>
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let airport of active_search_suggestions$ | async" [value]="airport" class="ten-autocomplete">
{{ airport.name.toLowerCase() }}
<br>
<span class="typography-small-text">{{ airport.iata_code }}</span>
<div *ngIf="airport.object_type === 'airport_group'"> Any Airport</div>
</mat-option>
</mat-autocomplete>
</div>