浮动标签不尊重边界区域

Question

我正在使用角形材料创建一个表单，并将mat-form-field与appearance = "outline"属性一起使用，当加载图像并单击输入时遇到图像问题：

但是，当您单击重新加载页面时，该页面通常会显示，如下图所示：

我已经确定，当我第一次加载页面或使用ctrl + F5重新加载页面时，会发生此问题。 所有输入都会出现此问题，包括那些占位符只有3个字母，甚至在输入中也没有图标的情况。

有人知道我该如何调整吗？

Edit1：遵循我输入之一的代码：

          <mat-form-field appearance="outline">
            <mat-label>Sobrenome</mat-label>
            <input matInput formControlName="sobrenome">
            <mat-error
              *ngIf="firstForm.controls['sobrenome'].hasError('required') || firstForm.controls['sobrenome'].touched">
              Informe um sobrenome válido!
            </mat-error>
          </mat-form-field>



          <mat-form-field appearance="outline">
            <mat-label>Data de nascimento</mat-label>
            <input matInput [matDatepicker]="picker" formControlName="dataNasc">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
            <mat-error
              *ngIf="firstForm.controls['dataNasc'].hasError('required') || firstForm.controls['dataNasc'].touched">
              Informe uma data de nascimento válida!
            </mat-error>
          </mat-form-field>

Answer 1

使用ng s --aot检查您的代码错误，这是因为您有模板代码错误。

Answer 2

您不应使用图片，而应使用像blitzy这样的材质图标

<mat-icon matSuffix>calendar_today</mat-icon>

Answer 3

我解决了，我已经从棱角材料中删除了标准主题声明，再次添加了该主题，不再出现问题。谢谢。