Угловой ввод материала и выбор в одном поле формы - PullRequest
Новая
       13

Угловой ввод материала и выбор в одном поле формы

0 голосов
/ 08 января 2019

Я хочу, чтобы поле ввода и раскрывающееся поле находились в той же области, что и поле слева (я сделал это в инспекторе) Dropdown menus

Независимо от того, какой класс я добавлю в свою таблицу стилей, размер меню выбора не уменьшится. Это HTML-код, который у меня есть. 

<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>

Ответы [ 2 ]

0 голосов
/ 08 января 2019

Вы можете обернуть поле формы в элемент div и назначить ему класс, чтобы вы могли вложить CSS. Причина вложения CSS заключается в том, чтобы избежать его влияния на остальные элементы управления. Я сделал что-то вроде этого: 

<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>

и затем добавьте следующий глобальный CSS-код: 

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

Демо

0 голосов
/ 08 января 2019

Вот мое решение: 

<mat-form-field appearance="outline" style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;"> <--- put style here, im not sure the syntax but this is pseudo code
 <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">

Подскажите, работает ли он

...