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

Question

I am following the example from https://material.angular.io/components/stepper/examples but all my matform field is the same line this the picture

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

the bad result The desired result is this:

Nom input first line(first mat-form-field)
Numero input second line (secind mat-form-field)
... the same behaviour for the other

desired result

How can i do this please help ?

Check out my solution and if it works for you please upvote and make it the accepted answer. — Zunayed Shahriar, Apr 18 '21 at 13:08

score 1 · Accepted Answer · answered Apr 18 '21 at 13:04

1

First, add this CSS snippet at your styles.css/styles.scss file.

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

Since you are using mat-grid-list you have to manually align the content to left.

Second, If you want every mat-form-field on a separate line. Then you have to add every mat-form-field separately inside separate mat-grid-tile. E.g:

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

Working demo at StackBlitz.

Final result:

answered Apr 18 '21 at 13:04

Zunayed Shahriar

2,557
2
12
15

Hi @Zunayed Shahriar, i have a problem with your solution. You can find it in your stackblitz demo. when i fill all fields in first step, the next button doesn't work to access to the second step. Can you look at it please ? – obela06 Apr 18 '21 at 14:03
OK. Working on that. – Zunayed Shahriar Apr 18 '21 at 14:05
Hi @Zunayed Shahriar, now if i fill all fields , the next button work. but the Back button doesn't work. If i want to modify anything in previous step, i can't return to the previous step because the back button doesn't work. can you look at it please – obela06 Apr 18 '21 at 14:25
Hi @Zunayed Shahriar, how can i do to working my next button. I copy paste your solution , but for me the button next doesn't work. How did you change in the first solution please – obela06 Apr 18 '21 at 15:03
You have to provides valid input for your inputs. Only after that, the next button will work. If it still doesn't work upload your project at StackBlitz. – Zunayed Shahriar Apr 18 '21 at 15:07
Hi @Zunayed Shahriar,this is my stackblizt https://zzmivarbv.github.stackblitz.io/apropos – obela06 Apr 18 '21 at 15:24
It doesn't start. I think you've shared that from github. So, better share the git repo with me.. – Zunayed Shahriar Apr 18 '21 at 15:43
Hi @Zunayed Shahriar, this is my repo github. you must click to "a propos de nous" https://stackblitz.com/github/lnquaidorsay/gopassfront – obela06 Apr 18 '21 at 15:56
Your next button is not working because your `identiteFormGroup` form is not valid. You have required `formControl`s like `datenaiss` which is not in the form. So, add all your required `formControl`s into the form inside stepper. – Zunayed Shahriar Apr 18 '21 at 16:35
So, either you add all of your required controls into the form. Or remove required validations from the fields. – Zunayed Shahriar Apr 18 '21 at 16:43
Hi @Zunayed Shahriar, i test to remove all required validators and it's work. I want to add all required fields in the form. very thanks to you – obela06 Apr 18 '21 at 16:46

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

1 Answers1