Create unit conversion input and dropdown (Angular 9 dynamic forms)

Question

I have an input that's part of the form group which is a number saved on the server in meters. The frontend needs the ability to convert this value to whatever the user chooses in a dropdown list (Feet, Yards, Miles, Meters, Kilometers) and it will automatically convert that input to the user in that unit of measurement. When the form is submitted, it needs to be converted back to meters to the server. I can't seem to figure out the proper way to keep the input field showing the converted value while sending the value in meters to the server.

<div class="form-group" class="form-group">
    <label>Radius Unit</label>
    <select class="form-control" (change)="changeUnit($event)">
        <option value="feet" [selected]="radiusUnit == 'feet'">Feet</option>
        <option value="yards" [selected]="radiusUnit == 'yards'">Yards</option>
        <option value="miles" [selected]="radiusUnit == 'miles'">Miles</option>
        <option value="meters" [selected]="radiusUnit == 'meters'">Meters</option>
        <option value="kilometers" [selected]="radiusUnit == 'kilometers'">Kilometers</option>
    </select>
    <label>Radius (In {{ radiusUnit }})</label>
    <input type="number" class="form-control" placeholder="Radius" formControlName="circleRadiusMeters">
</div>