Angular 18中Stepper下方表单字段被遮挡问题求助

在Angular 18中实现带表单字段的mat-horizontal-stepper组件时，表单字段始终被步进器标签遮挡。即使给表单字段添加上边距、设置overflow:visible，仅能移动字段位置，遮挡问题仍无法解决。

问题截图说明 #

• 表单字段被步进器标签直接遮挡
• 添加上边距后，字段位置下移但依旧被标签覆盖

组件HTML模板代码 #

<div class="stepper-container">
  <mat-horizontal-stepper linear #stepper>
    <mat-step label="Dirección" [stepControl]="addressForm">
      <form [formGroup]="addressForm">
        <div>
          <mat-form-field>
            <mat-label>Address</mat-label>
            <input matInput formControlName="address" />
            <mat-error *ngIf="addressControl?.invalid"
              >Dirección requerida</mat-error
            >
          </mat-form-field>
        </div>
        <div>
          <button mat-raised-button color="primary" (click)="stepper.next()">
            Siguiente
          </button>
        </div>
      </form>
    </mat-step>

    <mat-step label="Información del Vehículo" [stepControl]="vehicleForm">
      <form [formGroup]="vehicleForm">
        <div class="step-content">
          <mat-form-field>
            <mat-label>Vehicle Info</mat-label>
            <input matInput formControlName="vehicleInfo" />
            <mat-error *ngIf="vehicleForm.get('vehicleInfo')?.invalid">
              Información del vehículo requerida
            </mat-error>
          </mat-form-field>
        </div>
        <div class="step-content">
          <mat-form-field>
            <mat-label>Seleccione sus servicios</mat-label>
            <input matInput formControlName="services" />
            <mat-error *ngIf="vehicleForm.get('services')?.invalid">
              Debe seleccionar al menos un servicio
            </mat-error>
          </mat-form-field>
        </div>
        <div>
          <button mat-raised-button color="primary" (click)="stepper.next()">
            Siguiente
          </button>
        </div>
      </form>
    </mat-step>

    <mat-step>
      <ng-template matStepLabel>Resumen</ng-template>
      <p>Dirección: {{ addressForm.value.address }}</p>
      <p>Información del Vehículo: {{ vehicleForm.value.vehicleInfo }}</p>
      <p>Servicios Seleccionados: {{ vehicleForm.value.services.join(", ") }}</p>
      <p>Precio total: {{ totalPrice | currency }}</p>
      <div>
        <button mat-raised-button color="primary" (click)="stepper.next()">
          Siguiente
        </button>
      </div>
    </mat-step>

    <!-- Phase 4: Checkout -->
    <mat-step>
      <ng-template matStepLabel>Pago</ng-template>
      <p>Proceder a pagar</p>
      <button mat-raised-button color="primary" (click)="checkout()">
        Pago
      </button>
    </mat-step>
  </mat-horizontal-stepper>
</div>

尝试过的无效CSS代码 #

mat-form-field {
    width: 100%; /* Asegurar que los campos del formulario ocupen todo el ancho disponible */
    margin-top: 100px; /* Add top margin to separate form fields from stepper labels */
    display: block; /* Asegurar que los campos del formulario se muestren como elementos de bloque */
    overflow: visible; /* Asegurar que el desbordamiento sea visible */
}

有效解决方案 #

方案1：调整步进器内容区域的内边距

给步进器的内容容器添加上内边距，从根源拉开表单字段与顶部标签的距离：

.mat-horizontal-stepper-content {
  padding-top: 60px !important;
}

方案2：提高表单字段的层级

通过设置z-index确保表单字段在标签上方显示：

mat-form-field {
  position: relative;
  z-index: 10;
  width: 100%;
  display: block;
}

方案3：组合使用（推荐）

同时调整内边距和层级，确保彻底解决遮挡：

.mat-horizontal-stepper-content {
  padding-top: 50px !important;
}

mat-form-field {
  position: relative;
  z-index: 5;
  width: 100%;
  display: block;
  margin-bottom: 20px;
}

原理说明 #

之前单独添加margin-top无效，是因为步进器的标签容器通常具有较高的z-index或固定定位属性，单纯移动字段位置无法避开标签的覆盖范围。通过调整内容区域内边距可以从布局上拉开距离，提高字段层级则能强制让字段显示在标签上方。

内容的提问来源于stack exchange，提问作者Alejololer