包裹在 matFormField 内时 matSuffix 不起作用答案

【问题标题】：matSuffix not working when wrapped inside of matFormField包裹在 matFormField 内时 matSuffix 不起作用
【发布时间】：2021-01-20 03:25:00
【问题描述】：

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

app.component.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>

my-date-picker.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 错误更糟糕。

【问题讨论】：

标签： css angular datepicker mat-form-field

【解决方案1】：

所以我发现 matSuffix 仅适用于直系后代，找不到适合我的情况的任何解决方法。直到今天，这似乎是一个开放的“问题”。实际上，这应该是预期的行为，尽管很多人似乎都在为它而苦恼。

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

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

【讨论】：