如何在 Angular 11 material 中正确对齐我的表单中的垫表单字段？

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>

糟糕的结果期望的结果是这样的：

Nom 输入第一行（第一个 mat-form-field）
Numero 输入第二行（secind mat-form-field）
...另一个行为相同

想要的结果

我该怎么做请帮忙？

Answer 1

首先，在您的样式中添加这个CSS片段。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。

最终结果：

如何在 Angular 11 material 中正确对齐我的表单中的垫表单字段？

How to align correctly mat form field in my forms in Angular 11 material?

css

typescript

angular-material

angular

angular-material-stepper