edit-data.component.html

<app-form-page>
    <form [formGroup]="formGroup" (ngSubmit)="submit()">
        <h2>Modifier mes données personnelles</h2>
        <p class="text-center">Informations personnelles</p>
        <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="firstName" placeholder="Prénom" required>
        </mat-form-field>
        <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="lastName" placeholder="Nom" required>
          </mat-form-field>
        
          <div class="form-group">
            <mat-form-field class="horizontal-display">
              <mat-label>Sexe</mat-label>
              <mat-select  formControlName="gender" required>
                <mat-option value="Homme">Homme</mat-option>
                <mat-option value="Femme" >Femme</mat-option>
                <mat-option value="Autre">Autre</mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field class="horizontal-display" >
              <mat-label>Nationalité</mat-label>
              <mat-select  formControlName="nationality" required>
                    <mat-option *ngFor="let nationality of possibleNationalities" [value]="nationality.name"> {{ nationality.name }}</mat-option>
                  </mat-select>
            </mat-form-field>
          </div>
          
          <p class="text-center">Adresse</p>
          <div class="form-group">
            <mat-form-field class="full-width address-input quarter-display">
              <input matInput type="text"  formControlName="addressNumber" placeholder="Numéro de rue" required>
            </mat-form-field>
            <mat-form-field class="full-width address-input">
              <input  matInput  type="text" formControlName="street" placeholder="Rue" required>
            </mat-form-field>
          </div>
          
          <div class="form-group">
            <mat-form-field class="full-width address-input quarter-display">
              <input matInput type="text" minlength="5" maxlength="5" formControlName="zipCode" placeholder="Code postal" required>
              <mat-error *ngIf="formGroup.controls['city'].hasError('pattern')">
                Vous devez rentrer un code postal correct
              </mat-error>
            </mat-form-field>
        
            <mat-form-field class="full-width address-input" >
              <input matInput   type="text" formControlName="city" placeholder="Ville" required>
            </mat-form-field>
          </div>
          <p class="text-center">Informations de contact</p>
          <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="personalPhone" placeholder="Téléphone personnel sous la forme '0623456789' (sans espaces ni tirets)" required>
          </mat-form-field>
          <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="parentsPhone" placeholder="Téléphone des parents  sous la forme '0623456789' (sans espaces ni tirets)" required>
          </mat-form-field>
    
          <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="parentsEmail" placeholder="Email des parents" required>
          </mat-form-field>
    
          <p class="text-center">Informations scolaires</p>
    
          <mat-form-field class="full-width" >
            <mat-label>Etablissement </mat-label>
            <mat-select  formControlName="school" required>
              <mat-option *ngFor="let school of possibleSchools" [value]="school.id">{{ school.name }}</mat-option>
            </mat-select>