Блог

Я использую шаг в угловых материалах https://material.angular.io/components/stepper/examples

Пример стекблитца можно увидеть здесь

я хочу иметь две колонки за один шаг. В первом столбце я хочу, чтобы в моей форме было 4 элемента, а во втором столбце я хочу, чтобы в моей форме было 3 элемента. но я не могу получить правильный результат моего кода : app.component.html

       <mat-grid-tile>
        <mat-form-field>
            <mat-select formControlName="typeIdentite" placeholder="Type pièce identité*" >
                <ng-container >
                  <mat-option value="C">Carte</mat-option>
                  <mat-option value="P">Passeport</mat-option>
                </ng-container>
              </mat-select>
              <mat-error>Type d'identité est obligatoire.</mat-error>
        </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
        <mat-form-field>
          <input matInput formControlName="numIdentite"  placeholder="Numero pièce identite" required>
          <mat-error>numero d'identité est obligatoire.</mat-error>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile>
          <mat-form-field>
              <input matInput formControlName="dateDelivIdentite" [matDatepicker]="myDatepicker" placeholder="Date delivrance*" />
              <mat-datepicker-toggle matSuffix [for] = "myDatepicker" placeholder="mm/dd/yyyy"></mat-datepicker-toggle>
              <mat-datepicker #myDatepicker></mat-datepicker>
              <mat-error>Le date est obligatoire.</mat-error>
          </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile>
        <mat-form-field>
          <input matInput formControlName="organeDelivIdentite"  placeholder="Organisme ayant délivré la pièce d’identité">
        </mat-form-field>
      </mat-grid-tile>
    </div>
  </mat-grid-tile>
  <mat-grid-tile>
    <div class="controles-container">
      <mat-grid-tile>
        <mat-form-field>
          <mat-label>Nom</mat-label>
          <input matInput formControlName="nom" placeholder="Nom voyageur" required>
          <mat-error>Le nom est obligatoire.</mat-error>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile>
        <mat-form-field>
          <input matInput formControlName="prenom"  placeholder="Prenom" required >
          <mat-error>Le prenom est obligatoire.</mat-error>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile>
        <mat-form-field>
          <input matInput formControlName="postnom"  placeholder="Postnom" >
        </mat-form-field>
      </mat-grid-tile>
    </div>
  </mat-grid-tile>
</mat-grid-list>
<div>
  <button mat-button matStepperNext>Suivant</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="formGroup2" [editable]="isEditable">
  <form [formGroup]="formGroup2">
<ng-template matStepLabel>Text3</ng-template>
<mat-grid-list cols="1" rowHeight="100px">
    <mat-grid-tile>
    <mat-form-field>
        <mat-select formControlName="typevol" placeholder="Type de vol*" >
            <ng-container >
              <mat-option value="N">nat</mat-option>
              <mat-option value="I">int</mat-option>
            </ng-container>
          </mat-select>
          <mat-error>Type de vol est obligatoire.</mat-error>
    </mat-form-field>
    </mat-grid-tile>
  <mat-grid-tile>
    <mat-form-field>
      <mat-label>Compagnie</mat-label>
      <mat-select formControlName="compagnie" placeholder="Compagnie aérienne" required>
        <ng-container >
          <mat-option value="AF">ca</mat-option>
        </ng-container>
      </mat-select>
      <mat-error>Compagnie est obligatoire.</mat-error>
    </mat-form-field>
 </mat-grid-tile>
</mat-grid-list>
<div>
  <button mat-button matStepperPrevious>Retour</button>
  <button mat-button matStepperNext>Suivant</button>
</div>
</form>
</mat-step>
<mat-step>
<form [formGroup]="formGroup3">
    <ng-template matStepLabel>Last step</ng-template>
    <p>You are now done.</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
      <button mat-button (click)="valider()">valider</button>
    </div>
</form>
</mat-step>
</mat-horizontal-stepper>
 

мой css

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

Я хочу, чтобы на каждом шаге было 2 столбца, и я хочу, чтобы на последнем шаге, когда пользователь нажимает кнопку valider в моем приложении.component.ts, я получал все значения, заданные пользователем на предыдущих шагах. Как я могу это сделать, пожалуйста ?

желаемое поведение