matSuffix 包裹在 matFormField 内部时不起作用

Question

我目前正在尝试编写一个全局日期选择器。为此，我创建了一个从角度观察给定示例的组件（https://material.angular.io/guide/creating-a-custom-form-field-control）。我只想外包整个 mat-form-field 的一部分，所以这就是我正在做的事情：

应用程序组件.html：

  <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <my-date-picker formControlName="birthday"></my-date-picker>
  </mat-form-field>

我的日期选择器.component.html：

<input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
  (ngModelChange)="modelChanged($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

（我认为 .ts 对我的问题不重要）

但现在看起来像这样：

如果我将其像这样包装在 app.component.html 中，也会发生这种情况：

  <mat-form-field color="accent" floatLabel="always">
    <mat-label>Date of Birth</mat-label>
    <div>
      <input matInput [matDatepicker]="picker" placeholder="TT.MM.JJJJ" [ngModel]="value"
      (ngModelChange)="modelChanged($event)">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </div>
  </mat-form-field>

因为这样它将 matSuffix 呈现为 mat-infix 的一部分。所以看来 matSuffix 没有被正确识别。

虽然它会像这样渲染而不需要额外的包装器（div）：

推杆：

<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

在 app.component.html 中不是一个选项。我尝试了这个，但这只会导致其他错误，这些错误比 css 错误更糟糕。

Answer 1

所以我发现 matSuffix 仅适用于直系后代，无法找到适合我的情况的任何解决方法。迄今为止，这似乎是一个悬而未决的“问题”。实际上，这应该是预期的行为，尽管很多人似乎对此感到挣扎。

我通过使用指令而不是包装组件解决了这个问题。该指令侦听诸如keydown和更改之类的事件以验证日期输入，并设置占位符，以便使用该指令的每个日期选择器都已经具有我想要的占位符。

如果有人对上述问题有实际的解决方案，请随时分享。