角材料输入并在一个表单字段中选择 [英] Angular Material Input and select in one form field

问题描述

我希望输入字段和下拉字段与左侧相同(我在检查器上这样做)

无论我在样式表中放入什么类，它都不会缩小选择菜单的大小.这是我的 html 代码.

解决方案

您可以将表单字段包装在一个 div 中并为其分配一个类，以便您可以嵌套 CSS.嵌套 CSS 的原因是为了避免它影响其余的控件.我做了这样的事情:

<mat-form-field appearance="outline"><mat-label>结束时间</mat-label><input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl"><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></mat-form-field>

然后在全局某处添加以下 CSS:

.time-picker-component .mat-form-field-infix {显示:继承；}

演示

I want the input field and the drop down field in the same area like the one on the left (I did this on the inspector)

No matter what class I put in my stylesheet it won't shrink the size of the select menu. This is the html code I have.

<mat-form-field appearance="outline">
     <mat-label>End Time</mat-label>
     <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <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>
</mat-form-field>

解决方案

You could wrap your form field in a div and assign it a class so that you can nest the CSS. The reason to nest the CSS is to avoid it affecting the rest of the controls. I did something like this:

<div class="time-picker-component">
    <mat-form-field appearance="outline">
        <mat-label>End Time</mat-label>
        <input matInput type="time" placeholder="HH:MM" id="end_time_hour" [formControl]="timeFormControl">
     <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>
   </mat-form-field>
</div>

and then add the folloing CSS somewhere globally:

.time-picker-component .mat-form-field-infix {
  display: inherit;
}

Demo

这篇关于角材料输入并在一个表单字段中选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！