selección de material angular y entrada dentro del mismo campo

Question

Me encontré con esta publicación que funciona bien cuando la selección está después de la entrada, pero ¿cómo se usaría con un mat-select antes de la entrada? Tan pronto como cambio el orden, el componente se vuelve inutilizable y la selección se activa con cada clic dentro del campo.

Entrada de material angular y seleccione en un campo de formulario

Mi tenedor: https://stackblitz.com/edit/angular-6nqzf1-ox413y?file=app%2Fform-field-overview-example.html

    <mat-form-field appearance="outline">
        <mat-label>End Time</mat-label>
        <mat-select name="ampm" class="ampm" [(ngModel)]="event.eampm">
            <mat-option value="AM">AM</mat-option>
            <mat-option value="PM">PM</mat-option>
        </mat-select>
        <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
   </mat-form-field>

Answer 1

Siga los documentos de material angular que analizan la creación de un control de campo de formulario personalizado: Creación de un control de campo de formulario personalizado