角材料：垫形为什么不将垫形提示包裹在内部？

Question

我希望表单字段看起来正确。但是，第一个字段的提示文本与它下面的第二个字段相交，并且该文本看起来很脏。我的目标是将这些重叠的文本分开。但是我还没有找到解决方案。我该如何解决这个问题？

我不希望表格看起来像图片一样。

编辑：我使用的是他在Angular官方网站上建议的方法。 https://stackblitz.com/angular/lnkmogrbgry?file=app%2Fform-field-overview-example.ts

编辑2 ： userform.component.html

<div class="col-lg-8 mx-auto mt-5">
  <mat-card class="fullbar">
    <div class="card-header-bar">
      New User Form!
    </div>
    <mat-card-content class="mt-3 card-content-bar">

      <form [formGroup]="userGroup">

        <mat-form-field class="full-width">
          <input matInput placeholder="Username" formControlName="username">
          <mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
            non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
            malesuada nisi mi at lectus.
          </mat-hint>
        </mat-form-field>

        <mat-form-field class="full-width">
          <input matInput placeholder="Password" formControlName="password">
          <mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
            non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
            malesuada nisi mi at lectus.
          </mat-hint>
        </mat-form-field>


        <mat-form-field class="full-width">
          <input matInput placeholder="Age" formControlName="age">
          <mat-hint>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh dui, viverra quis lacinia
            non, volutpat vel nisi. Donec fringilla, sem id vestibulum semper, diam ligula venenatis ligula, nec
            malesuada nisi mi at lectus.
          </mat-hint>
        </mat-form-field>

      </form>

    </mat-card-content>
  </mat-card>
</div>

userform.component.css

.fullbar {
  padding: 0px;
  margin: 0px;
  margin-top: 75px;
  margin-bottom: 225px;
}

.card-header-bar {
  line-height: 50px;
  height: 50px;
  max-height: 50px;
  vertical-align: middle;
  padding-left: 15px;
  color: rgba(0, 0, 0, .54);
  background-color: #e7e5f7;
}

.card-content-bar {
  padding: 15px;
}

.full-width {
  width: 100%;
}

Answer 1

我想您需要将mat-form-field的高度设置为auto。