Question

我只想创建一个包含例如几个日期选择器的材质控件，然后返回一个特殊的模型，例如DateRange类实例，或者返回一个包含日期选择器和一些自定义时间选择器的日期/时间选择器。在这种情况下，我遇到的问题是有两个底线，一个是日期选择器内部的问题，另一个是mat-form-field呈现的问题。我看到了创建自定义角度材质控件的示例，该控件包含一些输入，但是并不能涵盖所有可能的情况。

这是我的html：

<div [formGroup]="fields" fxLayout="row" fxLayoutGap="10px">
  <mat-form-field fxFlex="130px">
    <mat-label>{{ label }}</mat-label>

    <input
      #dateInput
      autocomplete="off"
      matInput
      (focus)="onTouched()"
      (dateInput)="onDateInput($event)"
      (keydown)="onKeyDown($event)"
      [matDatepicker]="datepicker"
      [min]="minDate"
      [max]="maxDate"
      formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
    <mat-datepicker #datepicker (opened)="onTouched()"></mat-datepicker>
  </mat-form-field>

  <mat-form-field fxFlex="100px">
    <hippo-time-input
      (focus)="onTouched()"
      (timeInput)="onTimeInput($event)"
      [min]="minTime"
      [max]="maxTime"
      [timepicker]="timepicker"
      formControlName="time">
    </hippo-time-input>
    <hippo-timepicker-toggle matSuffix [for]="timepicker"></hippo-timepicker-toggle>
    <ngx-material-timepicker #timepicker></ngx-material-timepicker>
  </mat-form-field>
</div>

想法是使用两个图标作为日期和时间来打开选择器。当我在mat-form-field组件内放置一个组件时，此模板会导致两条底线。如果我将模板中的mat-form-field替换为div，则需要设置图标的样式以正确放置它们，但此外，只会显示一个底线，该底线占用了两个子字段的空间。我发现的另一个问题是默认的材质字段宽度为180px，这限制了控件能够占用的空间量。

那么可以重用材质控件来构建更复杂的控件吗？

如何创建包含另一个物料控件的物料控件？

0 个答案: