angular - mat-list-item 中的 mat-form-field 重叠

Question

我正在实现一个 . firebase 登录的用户界面。为此，我使用了 angular material。

为了在用户端更轻松地进行输入更正，我想为用户实现 mat-h​​int，以便在用户键入不期望的内容时显示错误。

<mat-card>
  <mat-card-header>
    <mat-card-title>Login</mat-card-title>
    <mat-card-subtitle>Log into your existing account</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-list>
      <mat-divider></mat-divider>
      <h3 mat-subheader>Profile</h3>
      <mat-list-item>
        <mat-icon mat-list-icon>alternate_email</mat-icon>
        <mat-form-field mat-line class="width-100">
          <input matInput placeholder="Email" [(ngModel)]="email" [formControl]="emailFormControl"
            [errorStateMatcher]="matcher" />
          <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
            Please enter a valid email address
          </mat-error>
          <mat-error *ngIf="emailFormControl.hasError('required')">
            Email is <strong>required</strong>
          </mat-error>
        </mat-form-field>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>security</mat-icon>
        <mat-form-field mat-line class="width-100">
          <input matInput #passwordtest type="password" placeholder="Password" [(ngModel)]="password" />
          <mat-hint align="end" *ngIf="passwordtest.value.length < 6">{{passwordtest.value.length}} / 6 or more</mat-hint>
        </mat-form-field>
      </mat-list-item>
      <mat-divider></mat-divider>
    </mat-list>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button (click)="login(email, password)">Login</button>
  </mat-card-actions>
</mat-card>

然而，带有 mat-h​​int 和占位符的 mat-form-field 似乎并不是为在 mat-list-item< 中工作而设计的，因为结果看起来像这样。

如果我删除 mat-list-item(以及 mat-form-field 前面的小图标)，则提示和占位符不会重叠。

如您所见，结果并不理想，因为副标题与表单域未对齐。此外，我认为第一个选项(重叠部分)看起来更好，因为有小图标。

我想知道在这种情况下我的选择是什么，因为我不想通过添加额外的边距或填充来破坏 Material 设计。但是，我想这是有意为之的行为，我做错了什么。

如何设计此用户界面，使带有提示和占位符的输入字段不重叠？

Answer 1

<mat-list-item style="height:auto" *ngFor="let item of itemList"> ..

height:auto 也对我有用。没有这个，我观察到重叠的文本。如果 auto 工作，这比固定像素值要好。