如何在 Angular 11 材料中正确对齐表单中的垫子表单字段？

Question

我正在关注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. Numero 输入第二行（第二个 mat-form-field）
3. ...其他的行为相同

想要的结果

请问我该怎么做？

Answer 1

首先，将此 CSS sn-p 添加到您的 styles.css/styles.scss 文件中。

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

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

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

<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。

最终结果：