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

编程问答 2022-06-10

问题描述

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

app.component.html： 

=

my-date-picker.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>

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

但是现在看起来像这样：

enter image description here

如果我将其包装在app.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>

因为然后它将matSuffix呈现为mat-infix的一部分。 因此似乎无法正确识别matSuffix。

enter image description here

尽管无需额外的包装程序（divs）即可呈现出这样的效果：

enter image description here

放置：

  <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>
app.component.html中的

不是一个选项。我试过了，这只会导致其他错误，比CSS错误更严重。

解决方法

因此，我发现matSuffix仅适用于直接后代，找不到适用于我的情况的任何解决方法。到目前为止，这似乎是一个公开的“问题”。实际上，这应该是预期的行为，尽管很多人似乎对此感到挣扎。

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

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

angulardatepickerdatepickermat-form-field