如何在 Angular 11 材料的表单中正确对齐表单域？

问题描述

我遵循 https://material.angular.io/components/stepper/examples 中的示例，但我所有的 matform 字段都与图片在同一行

<mat-horizontal-stepper linear #stepper>
    <mat-step [stepControl]="identiteFormGroup" [editable]="isEditable">
    <form [formGroup]="identiteFormGroup">
      <ng-template matStepLabel>Identite</ng-template>
      
     <mat-grid-list cols="1" rowHeight="100px">
    <mat-grid-tile>
        <div class="controles-container">
        <mat-form-field>
                <mat-label>Nom</mat-label>
                <input matInput formControlName="firstCtrl" placeholder="Nom voyageur" required>
                <mat-error>Le nom est obligatoire.</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input matInput formControlName="numIdentite"  placeholder="Numero identite*" >
            <mat-error>Le numero d'identité est obligatoire.</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput formControlName="numIdentite"  placeholder="Numero identite*" >
            <mat-error>Le numero d'identité est obligatoire.</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput formControlName="nom"  placeholder="Nom*" >
            <mat-error>Le nom est obligatoire.</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput formControlName="prenom"  placeholder="Prenom*" >
            <mat-error>Le prenom est obligatoire.</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput formControlName="postnom"  placeholder="Postnom*" >
            <mat-error>Le postnom est obligatoire.</mat-error>
          </mat-form-field> 
        </div>
    </mat-grid-tile>
    </mat-grid-list>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
      </mat-step>
      <mat-step [stepControl]="voyageFormGroup" [editable]="isEditable">
    <form [formGroup]="voyageFormGroup">
      <ng-template matStepLabel>Adresse</ng-template>
  <mat-grid-list cols="1" rowHeight="100px">
    <mat-grid-tile>
        <div class="controles-container">
        <mat-form-field>
                <mat-label>Titre</mat-label>
                <input matInput formControlName="titre" placeholder="titre*" required>
                <mat-error>Le titre est obligatoire.</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input matInput formControlName="aute"  placeholder="auteur*" >
            <mat-error>auteur est obligatoire.</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput formControlName="numb"  placeholder="nombre*" >
            <mat-error>nombre est obligatoire.</mat-error>
          </mat-form-field>
          <mat-form-field>
            <input matInput formControlName="prc"  placeholder="Parc*" >
            <mat-error>parc est obligatoire.</mat-error>
          </mat-form-field>
        </div>
    </mat-grid-tile>
    </mat-grid-list>
      <div>
        <button mat-button matStepperPrevIoUs>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="detailFormGroup" [editable]="isEditable">
    <form [formGroup]="lieuFormGroup">
      <ng-template matStepLabel>Lieu</ng-template>
      <mat-grid-list cols="1" rowHeight="100px">
        <mat-grid-tile>
            <div class="controles-container">
            <mat-form-field>
                    <mat-label>Lieu</mat-label>
                    <input matInput formControlName="lieu" placeholder="lieu*" required>
                    <mat-error>Lieu est obligatoire.</mat-error>
            </mat-form-field>
            <mat-form-field>
                <input matInput formControlName="aute"  placeholder="auteur*" >
                <mat-error>auteur est obligatoire.</mat-error>
              </mat-form-field>
              <mat-form-field>
                <input matInput formControlName="numb"  placeholder="nombre*" >
                <mat-error>nombre est obligatoire.</mat-error>
              </mat-form-field>
              <mat-form-field>
                <input matInput formControlName="prc"  placeholder="Parc*" >
                <mat-error>parc est obligatoire.</mat-error>
              </mat-form-field>
            </div>
        </mat-grid-tile>
        </mat-grid-list>
      <div>
        <button mat-button matStepperPrevIoUs>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p>You are Now done.</p>
    <div>
      <button mat-button matStepperPrevIoUs>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

糟糕的结果

想要的结果是这样的：

1. Nom 输入第一行（第一个 mat-form-field）
2. 数字输入第二行（第二个 mat-form-field）
3. ...其他人的行为相同

想要的结果

我该怎么做，请帮忙？

解决方法

首先，在你的styles.css/styles.scss文件中添加这个CSS片段。

.mat-grid-tile .mat-figure {
  justify-content: left !important;
}

由于您使用的是 mat-grid-list，因此您必须手动将内容左对齐。

第二，如果您希望每个 mat-form-field 单独一行。然后您必须在单独的 mat-form-field 中分别添加每个 mat-grid-tile。例如：

<mat-grid-tile>
    <mat-form-field>
        <mat-label>Nom</mat-label>
        <input matInput formControlName="firstCtrl" placeholder="Nom voyageur" required>
        <mat-error>Le nom est obligatoire.</mat-error>
    </mat-form-field>
</mat-grid-tile>

工作演示在StackBlitz。

最终结果：