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

Question

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

为了更容易在用户端更正输入，我想为用户实现mat-hints 以在用户键入意外内容时显示错误。

<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-form-fieldwith mat-hints 和 placeholders 并非设计用于在 an 内工作mat-list-item，因为结果看起来像这样。

如果我删除mat-list-item（和前面的小图标mat-form-field），那么提示和占位符不会重叠。

如您所见，结果不是很好，因为子标题与表单字段未对齐。此外，我认为第一个选项（重叠）由于小图标而看起来更好。

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

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

标签： angularangular-material

Answer 1

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

height:auto 也为我工作。没有这个，我观察到重叠的文本。如果自动工作，它比固定像素值更好。