Update to Angular v19 and fixing (#3)

Reviewed-on: #3
Co-authored-by: sandre <perso@sebastienandre.com>
Co-committed-by: sandre <perso@sebastienandre.com>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -1,119 +1,267 @@
 <div class="content">
   <div>
-    <button mat-raised-button color="accent" [routerLink]="['/jumps']" [routerLinkActive]="['active']" skipLocationChange>{{ 'NewJump_GoToJump' | translate }}</button>
-    <p><mat-checkbox [(ngModel)]="resetForm" labelPosition="before">{{ 'NewJump_ResetForm' | translate }}</mat-checkbox></p>
+    <button
+      mat-raised-button
+      color="accent"
+      [routerLink]="['/jumps']"
+      [routerLinkActive]="['active']"
+      skipLocationChange
+    >
+      {{ "NewJump_GoToJump" | translate }}
+    </button>
+    <p>
+      <mat-checkbox [(ngModel)]="resetForm" labelPosition="before">{{
+        "NewJump_ResetForm" | translate
+      }}</mat-checkbox>
+    </p>
   </div>
-  
-  <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
+
+  <form
+    class="formNewJumps"
+    (ngSubmit)="onFormSubmit()"
+    *ngIf="notLoadingToDisplay(); else loading"
+  >
     <mat-form-field>
-      <mat-label>{{ 'NewJump_ChooseJumpType' | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType"
-        name="selectedJumpType">
-      <mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayNameFn">
+      <mat-label>{{ "NewJump_ChooseJumpType" | translate }}</mat-label>
+      <input
+        type="text"
+        matInput
+        [matAutocomplete]="autoJumpType"
+        [(ngModel)]="selectedJumpType"
+        name="selectedJumpType"
+      />
+      <mat-autocomplete
+        #autoJumpType="matAutocomplete"
+        [displayWith]="displayNameFn"
+      >
         <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
-          {{jumpType.name}}
+          {{ jumpType.name }}
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
-        (click)="selectedJumpType=undefined">
+      <button
+        *ngIf="selectedJumpType"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="selectedJumpType = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewJump_ChooseAircraft' | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft"
-        name="selectedAircraft">
-      <mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayNameFn">
+      <mat-label>{{ "NewJump_ChooseAircraft" | translate }}</mat-label>
+      <input
+        type="text"
+        matInput
+        [matAutocomplete]="autoAircraft"
+        [(ngModel)]="selectedAircraft"
+        name="selectedAircraft"
+      />
+      <mat-autocomplete
+        #autoAircraft="matAutocomplete"
+        [displayWith]="displayNameFn"
+      >
         <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
-          {{aircraft.name}}
+          {{ aircraft.name }}
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
-        (click)="selectedAircraft=undefined">
+      <button
+        *ngIf="selectedAircraft"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="selectedAircraft = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewJump_ChooseDz' | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz"
-        (ngModelChange)="onChangeDz($event)" name="selectedDz">
-      <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayNameFn">
-        <mat-option *ngFor="let dropZone of listOfFilteredDropZone" [value]="dropZone">
-          {{dropZone.name}}
-          <mat-icon aria-hidden="false" aria-label="Favorite" *ngIf="dropZone.isFavorite === true" color="primary">
-            favorite</mat-icon>
+      <mat-label>{{ "NewJump_ChooseDz" | translate }}</mat-label>
+      <input
+        type="text"
+        matInput
+        [matAutocomplete]="autoDropZone"
+        [(ngModel)]="selectedDz"
+        (ngModelChange)="onChangeDz($event)"
+        name="selectedDz"
+      />
+      <mat-autocomplete
+        #autoDropZone="matAutocomplete"
+        [displayWith]="displayNameFn"
+      >
+        <mat-option
+          *ngFor="let dropZone of listOfFilteredDropZone"
+          [value]="dropZone"
+        >
+          {{ dropZone.name }}
+          <mat-icon
+            aria-hidden="false"
+            aria-label="Favorite"
+            *ngIf="dropZone.isFavorite === true"
+            color="primary"
+          >
+            favorite</mat-icon
+          >
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedDz" matSuffix mat-icon-button aria-label="Clear" (click)="resetDz()">
+      <button
+        *ngIf="selectedDz"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="resetDz()"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewJump_ChooseGear' | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoGear" [(ngModel)]="selectedGear" name="selectedGear">
-      <mat-autocomplete #autoGear="matAutocomplete" [displayWith]="displayGearFn">
+      <mat-label>{{ "NewJump_ChooseGear" | translate }}</mat-label>
+      <input
+        type="text"
+        matInput
+        [matAutocomplete]="autoGear"
+        [(ngModel)]="selectedGear"
+        name="selectedGear"
+      />
+      <mat-autocomplete
+        #autoGear="matAutocomplete"
+        [displayWith]="displayGearFn"
+      >
         <mat-option *ngFor="let gear of listOfGear" [value]="gear">
-          {{gear.name}} ({{gear.mainCanopy}})
+          {{ gear.name }} ({{ gear.mainCanopy }})
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
-        (click)="selectedGear=undefined">
+      <button
+        *ngIf="selectedGear"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="selectedGear = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
-    <mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">{{ 'NewJump_Cutaway' | translate }}</mat-checkbox>
-    <mat-checkbox [(ngModel)]="isSpecial" name="isSpecial">{{ 'NewJump_Special' | translate }}</mat-checkbox>
+    <mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">{{
+      "NewJump_Cutaway" | translate
+    }}</mat-checkbox>
+    <mat-checkbox [(ngModel)]="isSpecial" name="isSpecial">{{
+      "NewJump_Special" | translate
+    }}</mat-checkbox>
 
     <mat-form-field>
-      <input matInput [matDatepicker]="beginDateDp" [(ngModel)]="beginDate" 
-             name="beginDate" disabled (ngModelChange)="onChangeBeginDate($event)">
-      <mat-datepicker-toggle matSuffix [for]="beginDateDp"></mat-datepicker-toggle>
+      <input
+        matInput
+        [matDatepicker]="beginDateDp"
+        [(ngModel)]="beginDate"
+        name="beginDate"
+        disabled
+        (ngModelChange)="onChangeBeginDate($event)"
+      />
+      <mat-datepicker-toggle
+        matSuffix
+        [for]="beginDateDp"
+      ></mat-datepicker-toggle>
       <mat-datepicker #beginDateDp disabled="false"></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput [matDatepicker]="endDateDp" [(ngModel)]="endDate" name="endDate" disabled>
-      <mat-datepicker-toggle matSuffix [for]="endDateDp"></mat-datepicker-toggle>
+      <input
+        matInput
+        [matDatepicker]="endDateDp"
+        [(ngModel)]="endDate"
+        name="endDate"
+        disabled
+      />
+      <mat-datepicker-toggle
+        matSuffix
+        [for]="endDateDp"
+      ></mat-datepicker-toggle>
       <mat-datepicker #endDateDp disabled="false"></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput placeholder="{{ 'NewJump_ExitAlt' | translate }}" [(ngModel)]="exitAltitude" name="exitAltitude" type="number">
-      <button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
-        (click)="exitAltitude=undefined">
+      <input
+        matInput
+        placeholder="{{ 'NewJump_ExitAlt' | translate }}"
+        [(ngModel)]="exitAltitude"
+        name="exitAltitude"
+        type="number"
+      />
+      <button
+        *ngIf="exitAltitude"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="exitAltitude = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
     <mat-form-field>
-      <input matInput placeholder="{{ 'NewJump_DeployAlt' | translate }}" [(ngModel)]="deployAltitude" name="deployAltitude" type="number">
-      <button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
-        (click)="deployAltitude=undefined">
+      <input
+        matInput
+        placeholder="{{ 'NewJump_DeployAlt' | translate }}"
+        [(ngModel)]="deployAltitude"
+        name="deployAltitude"
+        type="number"
+      />
+      <button
+        *ngIf="deployAltitude"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="deployAltitude = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput placeholder="{{ 'NewJump_Count' | translate }}" [(ngModel)]="countOfJumps" name="countOfJumps" type="number">
-      <button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
-        (click)="countOfJumps=undefined">
+      <input
+        matInput
+        placeholder="{{ 'NewJump_Count' | translate }}"
+        [(ngModel)]="countOfJumps"
+        name="countOfJumps"
+        type="number"
+      />
+      <button
+        *ngIf="countOfJumps"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="countOfJumps = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <textarea matInput placeholder="{{ 'NewJump_Comments' | translate }}" [(ngModel)]="comments" name="comments" type="text"></textarea>
-      <button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear"
-        (click)="comments=undefined">
+      <textarea
+        matInput
+        placeholder="{{ 'NewJump_Comments' | translate }}"
+        [(ngModel)]="comments"
+        name="comments"
+        type="text"
+      ></textarea>
+      <button
+        *ngIf="comments"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="comments = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <br />
-    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">{{ 'NewJump_Submit' | translate }}</button>
+    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">
+      {{ "NewJump_Submit" | translate }}
+    </button>
   </form>
 
   <ng-template #loading>