angular material select and input inside the same field

Question

I came across this post which works well when the select is after the input, but how would one use it with a mat-select before the matinput? As soon as I switch the order, the component becomes unusable, with the select being triggered with every click inside the field.

Angular Material Input and select in one form field

My fork: 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>

The official way: material.angular.io/guide/creating-a-custom-form-field-control — Rafi Henig
– Rafi Henig, Commented Aug 17, 2020 at 16:05
Thanks, I'll accept this if you move the comment to an answer. — Paul
– Paul, Commented Aug 17, 2020 at 16:43

Rafi Henig · Accepted Answer · 2020-08-17 16:57:19Z

-1

Follow the angular-material docs which looks at creating a custom form field control: Creating a custom form field control

answered Aug 17, 2020 at 16:57

Rafi Henig

6,4502 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular material select and input inside the same field

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related