angular-material - Angular Material：为什么 mat-form 没有将 mat-h​​int 包裹在里面？

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%;
}

标签： angular-materialangular7

Answer 1

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