mat-form-field в перекрытии mat-list-item

Question

Я реализую. Пользовательский интерфейс для входа в Firebase. Для этого я использую angular material.

Для упрощения коррекции ввода на стороне пользователя я хочу реализовать mat-hint s, чтобы пользователь отображал ошибку всякий раз, когда пользователь вводил что-то, чего не ожидал.

<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-field с mat-hint s и заполнителями не предназначен для работы в пределах mat-list-item, потому что результат выглядит следующим образом.

если я удаляю mat-list-item (и маленький значок перед mat-form-field), то подсказки и заполнители не перекрываются.

Как вы можете видеть, результат не так хорош, потому что подзаголовок не совпадает с полем формы. Кроме того, я думаю, что первый вариант (с перекрытием) выглядит лучше из-за маленьких значков.

Мне интересно, какие у меня есть варианты в этой ситуации, потому что я не хочу нарушать дизайн материала, добавляя дополнительные поля или отступы. Однако я предполагаю, что это предполагаемое поведение и что я делаю что-то не так.

Как я могу спроектировать этот пользовательский интерфейс таким образом, чтобы поля ввода с подсказками и заполнителями не перекрывались?

Answer 1

Вы можете увеличить высоту .mat-list-item, используя !important, например, так:

.mat-list-item {
    height: 80px !important; /** experiment with height **/
}

Лучшим способом сделать это было бы предоставление стилей с более высокой специфичностью (т. Е. Добавить дополнительный класс к каждому list-item со своим стилем).

.custom-class .mat-list-item {
    height: 80px;
}

Альтернативой является добавление отступа слева от mat-form-field, чтобы соответствовать заполнению заголовка.