Front/skydivelogs-app/src/app/create-user/create-user.component.ts

@@ -1,6 +1,11 @@
 import { Component, OnInit } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { CommonModule } from "@angular/common";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -14,7 +19,12 @@ import { User } from "../../models/user";
   selector: "app-create-user",
   templateUrl: "./create-user.component.html",
   styleUrls: ["./create-user.component.css"],
-  imports: [TranslateModule, CommonModule, MatFormFieldModule],
+  imports: [
+    TranslateModule,
+    CommonModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+  ],
 })
 export class CreateUserComponent implements OnInit {
   createForm: FormGroup;

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

@@ -1,9 +1,32 @@
 <form (ngSubmit)="updateJump()">
-    <p><span>Gear : {{jump.gear.name}} ({{jump.gear.mainCanopy}})</span></p>
+  <p>
-    <p><mat-checkbox [(ngModel)]="jump.isSpecial" name="isSpecial" labelPosition="before">Special jump</mat-checkbox></p>
+    <span>Gear : {{ jump.gear.name }} ({{ jump.gear.mainCanopy }})</span>
-    <p><mat-checkbox [(ngModel)]="jump.withCutaway" name="withCutaway" labelPosition="before">Cutaway</mat-checkbox></p>
+  </p>
+  <p>
+    <mat-checkbox
+      [(ngModel)]="jump.isSpecial"
+      name="isSpecial"
+      labelPosition="before"
+      >Special jump</mat-checkbox
+    >
+  </p>
+  <p>
+    <mat-checkbox
+      [(ngModel)]="jump.withCutaway"
+      name="withCutaway"
+      labelPosition="before"
+      >Cutaway</mat-checkbox
+    >
+  </p>
   <mat-form-field>
-        <textarea matInput placeholder="Comments" name="comments" [(ngModel)]="jump.notes" name="comments" type="text"></textarea>
+    <textarea
+      matInput
+      placeholder="Comments"
+      name="comments"
+      [(ngModel)]="jump.notes"
+      name="comments"
+      type="text"
+    ></textarea>
   </mat-form-field>
 
   <br />

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts

@@ -4,6 +4,7 @@ import { MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { TranslateModule } from "@ngx-translate/core";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatFormFieldModule } from "@angular/material/form-field";
+import { FormsModule } from "@angular/forms";
 
 import { AddAction } from "../../models/add-action.enum";
 import { JumpResp } from "../../models/jump";
@@ -20,6 +21,7 @@ import { ServiceComm } from "../../services/service-comm.service";
     CommonModule,
     MatCheckboxModule,
     MatFormFieldModule,
+    FormsModule,
   ],
 })
 export class JumpInfosComponent implements OnInit {

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { FormGroup, FormControl, Validators } from "@angular/forms";
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  ReactiveFormsModule,
+} from "@angular/forms";
 import { MatTableDataSource } from "@angular/material/table";
 import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
 import { trigger, state, style } from "@angular/animations";
@@ -31,6 +36,7 @@ import { TranslateModule } from "@ngx-translate/core";
     MatIconModule,
     MatPaginatorModule,
     MatFormFieldModule,
+    ReactiveFormsModule,
   ],
 })
 export class ListOfImagesComponent implements OnInit {

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.ts

@@ -9,6 +9,7 @@ import { MatListModule } from "@angular/material/list";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatRadioModule } from "@angular/material/radio";
 import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { FormsModule } from "@angular/forms";
 
 import { ChartConfiguration, ChartData, ChartType } from "chart.js";
 import { from, groupBy, mergeMap, reduce, map } from "rxjs";
@@ -33,6 +34,7 @@ import { TunnelFlight, TunnelFlightByMonth } from "../../models/tunnel-flight";
     RouterLink,
     MatRadioModule,
     MatProgressBarModule,
+    FormsModule,
   ],
 })
 export class ListOfTunnelFlightsComponent implements OnInit {

Front/skydivelogs-app/src/app/login-user/login-user.component.ts

@@ -1,7 +1,12 @@
 import { Component, OnInit, ViewChild, AfterViewInit } from "@angular/core";
 import { Router, ActivatedRoute } from "@angular/router";
 import { CommonModule } from "@angular/common";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import {
+  FormBuilder,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
 import { TranslateModule } from "@ngx-translate/core";
 import { MatInput } from "@angular/material/input";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -14,7 +19,12 @@ import { AuthenticationService } from "../../services/authentication.service";
   selector: "app-login-user",
   templateUrl: "./login-user.component.html",
   styleUrls: ["./login-user.component.css"],
-  imports: [TranslateModule, CommonModule, MatFormFieldModule],
+  imports: [
+    TranslateModule,
+    CommonModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+  ],
 })
 export class LoginUserComponent implements OnInit, AfterViewInit {
   loginForm: FormGroup;

Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
 import { TranslateModule } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
 
@@ -12,7 +17,7 @@ import { ServiceComm } from "../../services/service-comm.service";
   selector: "app-new-aircraft",
   templateUrl: "./new-aircraft.component.html",
   styleUrls: ["./new-aircraft.component.css"],
-  imports: [TranslateModule, MatFormFieldModule],
+  imports: [TranslateModule, MatFormFieldModule, ReactiveFormsModule],
 })
 export class NewAircraftComponent implements OnInit {
   public addForm: FormGroup;

Front/skydivelogs-app/src/app/new-drop-zone/new-drop-zone.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
 import { TranslateModule } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatCheckboxModule } from "@angular/material/checkbox";
@@ -13,7 +18,12 @@ import { DropzoneService } from "../../services/dropzone.service";
   selector: "app-new-drop-zone",
   templateUrl: "./new-drop-zone.component.html",
   styleUrls: ["./new-drop-zone.component.css"],
-  imports: [TranslateModule, MatFormFieldModule, MatCheckboxModule],
+  imports: [
+    TranslateModule,
+    MatFormFieldModule,
+    MatCheckboxModule,
+    ReactiveFormsModule,
+  ],
 })
 export class NewDropZoneComponent implements OnInit {
   public addForm: FormGroup;

Front/skydivelogs-app/src/app/new-gear/new-gear.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
 import { MatFormFieldModule } from "@angular/material/form-field";
 
 import { ServiceComm } from "../../services/service-comm.service";
@@ -11,7 +16,7 @@ import { TranslateModule } from "@ngx-translate/core";
   selector: "app-new-gear",
   templateUrl: "./new-gear.component.html",
   styleUrls: ["./new-gear.component.css"],
-  imports: [TranslateModule, MatFormFieldModule],
+  imports: [TranslateModule, MatFormFieldModule, ReactiveFormsModule],
 })
 export class NewGearComponent implements OnInit {
   public addForm: FormGroup;

Front/skydivelogs-app/src/app/new-jump-type/new-jump-type.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from "@angular/forms";
 import { TranslateModule } from "@ngx-translate/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
 
@@ -11,7 +16,7 @@ import { JumpTypeService } from "../../services/jump-type.service";
   selector: "app-new-jump-type",
   templateUrl: "./new-jump-type.component.html",
   styleUrls: ["./new-jump-type.component.css"],
-  imports: [TranslateModule, MatFormFieldModule],
+  imports: [TranslateModule, MatFormFieldModule, ReactiveFormsModule],
 })
 export class NewJumpTypeComponent implements OnInit {
   public addForm: FormGroup;

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>
+    <button
-    <p><mat-checkbox [(ngModel)]="resetForm" labelPosition="before">{{ 'NewJump_ResetForm' | translate }}</mat-checkbox></p>
+      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>
+      <mat-label>{{ "NewJump_ChooseJumpType" | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType"
+      <input
-        name="selectedJumpType">
+        type="text"
-      <mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayNameFn">
+        matInput
+        [matAutocomplete]="autoJumpType"
+        [(ngModel)]="selectedJumpType"
+        name="selectedJumpType"
+      />
+      <mat-autocomplete
+        #autoJumpType="matAutocomplete"
+        [displayWith]="displayNameFn"
+      >
         <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
           {{ jumpType.name }}
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedJumpType" matSuffix mat-icon-button aria-label="Clear"
+      <button
-        (click)="selectedJumpType=undefined">
+        *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>
+      <mat-label>{{ "NewJump_ChooseAircraft" | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoAircraft" [(ngModel)]="selectedAircraft"
+      <input
-        name="selectedAircraft">
+        type="text"
-      <mat-autocomplete #autoAircraft="matAutocomplete" [displayWith]="displayNameFn">
+        matInput
+        [matAutocomplete]="autoAircraft"
+        [(ngModel)]="selectedAircraft"
+        name="selectedAircraft"
+      />
+      <mat-autocomplete
+        #autoAircraft="matAutocomplete"
+        [displayWith]="displayNameFn"
+      >
         <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
           {{ aircraft.name }}
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedAircraft" matSuffix mat-icon-button aria-label="Clear"
+      <button
-        (click)="selectedAircraft=undefined">
+        *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>
+      <mat-label>{{ "NewJump_ChooseDz" | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedDz"
+      <input
-        (ngModelChange)="onChangeDz($event)" name="selectedDz">
+        type="text"
-      <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayNameFn">
+        matInput
-        <mat-option *ngFor="let dropZone of listOfFilteredDropZone" [value]="dropZone">
+        [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">
+          <mat-icon
-            favorite</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>
+      <mat-label>{{ "NewJump_ChooseGear" | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoGear" [(ngModel)]="selectedGear" name="selectedGear">
+      <input
-      <mat-autocomplete #autoGear="matAutocomplete" [displayWith]="displayGearFn">
+        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 }})
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedGear" matSuffix mat-icon-button aria-label="Clear"
+      <button
-        (click)="selectedGear=undefined">
+        *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)]="withCutaway" name="withCutaway">{{
-    <mat-checkbox [(ngModel)]="isSpecial" name="isSpecial">{{ 'NewJump_Special' | translate }}</mat-checkbox>
+      "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" 
+      <input
-             name="beginDate" disabled (ngModelChange)="onChangeBeginDate($event)">
+        matInput
-      <mat-datepicker-toggle matSuffix [for]="beginDateDp"></mat-datepicker-toggle>
+        [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>
+      <input
-      <mat-datepicker-toggle matSuffix [for]="endDateDp"></mat-datepicker-toggle>
+        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">
+      <input
-      <button *ngIf="exitAltitude" matSuffix mat-icon-button aria-label="Clear"
+        matInput
-        (click)="exitAltitude=undefined">
+        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">
+      <input
-      <button *ngIf="deployAltitude" matSuffix mat-icon-button aria-label="Clear"
+        matInput
-        (click)="deployAltitude=undefined">
+        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">
+      <input
-      <button *ngIf="countOfJumps" matSuffix mat-icon-button aria-label="Clear"
+        matInput
-        (click)="countOfJumps=undefined">
+        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>
+      <textarea
-      <button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear"
+        matInput
-        (click)="comments=undefined">
+        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>

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

@@ -15,6 +15,7 @@ import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatAutocompleteModule } from "@angular/material/autocomplete";
 import { MatDatepickerModule } from "@angular/material/datepicker";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { FormsModule } from "@angular/forms";
 
 import { JumpTypeResp } from "../../models/jumpType";
 import { AircraftResp } from "../../models/aircraft";
@@ -64,6 +65,7 @@ class PickDateAdapter extends NativeDateAdapter {
     MatAutocompleteModule,
     MatDatepickerModule,
     MatProgressSpinnerModule,
+    FormsModule,
   ],
 })
 export class NewJumpComponent implements OnInit {

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html

@@ -1,63 +1,142 @@
 <div class="content">
   <div>
-    <button mat-raised-button color="accent" [routerLink]="['/tunnelFlights']" [routerLinkActive]="['active']" skipLocationChange>{{ 'NewTunnelFlight_GoToJump' | translate }}</button>
+    <button
+      mat-raised-button
+      color="accent"
+      [routerLink]="['/tunnelFlights']"
+      [routerLinkActive]="['active']"
+      skipLocationChange
+    >
+      {{ "NewTunnelFlight_GoToJump" | translate }}
+    </button>
   </div>
 
-  <form class="formNewJumps" (ngSubmit)="onFormSubmit()" *ngIf="notLoadingToDisplay() else loading">
+  <form
+    class="formNewJumps"
+    (ngSubmit)="onFormSubmit()"
+    *ngIf="notLoadingToDisplay(); else loading"
+  >
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_ChooseJumpType' | translate }}</mat-label>
+      <mat-label>{{ "NewTunnelFlight_ChooseJumpType" | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">
+      <input
-      <mat-autocomplete #autoJumpType="matAutocomplete" [displayWith]="displayNameFn">
+        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 }}
         </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>{{ 'NewTunnelFlight_ChooseTunnel' | translate }}</mat-label>
+      <mat-label>{{ "NewTunnelFlight_ChooseTunnel" | translate }}</mat-label>
-      <input type="text" matInput [matAutocomplete]="autoDropZone" [(ngModel)]="selectedTunnel"
+      <input
-        (ngModelChange)="onChangeTunnel($event)" name="selectedTunnel">
+        type="text"
-      <mat-autocomplete #autoDropZone="matAutocomplete" [displayWith]="displayNameFn">
+        matInput
-        <mat-option *ngFor="let tunnel of listOfFilteredTunnel" [value]="tunnel">
+        [matAutocomplete]="autoDropZone"
+        [(ngModel)]="selectedTunnel"
+        (ngModelChange)="onChangeTunnel($event)"
+        name="selectedTunnel"
+      />
+      <mat-autocomplete
+        #autoDropZone="matAutocomplete"
+        [displayWith]="displayNameFn"
+      >
+        <mat-option
+          *ngFor="let tunnel of listOfFilteredTunnel"
+          [value]="tunnel"
+        >
           {{ tunnel.name }}
         </mat-option>
       </mat-autocomplete>
-      <button *ngIf="selectedTunnel" matSuffix mat-icon-button aria-label="Clear" (click)="resetTunnel()">
+      <button
+        *ngIf="selectedTunnel"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="resetTunnel()"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_Date_Lbl' | translate }}</mat-label>
+      <mat-label>{{ "NewTunnelFlight_Date_Lbl" | translate }}</mat-label>
-      <input matInput [max]="maxDate" [matDatepicker]="flightDateDp" [(ngModel)]="flightDate" name="flightDate" disabled>
+      <input
-      <mat-datepicker-toggle matSuffix [for]="flightDateDp"></mat-datepicker-toggle>
+        matInput
+        [max]="maxDate"
+        [matDatepicker]="flightDateDp"
+        [(ngModel)]="flightDate"
+        name="flightDate"
+        disabled
+      />
+      <mat-datepicker-toggle
+        matSuffix
+        [for]="flightDateDp"
+      ></mat-datepicker-toggle>
       <mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_Minutes_Lbl' | translate }}</mat-label>
+      <mat-label>{{ "NewTunnelFlight_Minutes_Lbl" | translate }}</mat-label>
-      <input matInput placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}" [(ngModel)]="minutesOfFlight"
+      <input
-        name="minutesOfFlight" type="number">
+        matInput
-      <button *ngIf="minutesOfFlight" matSuffix mat-icon-button aria-label="Clear" (click)="minutesOfFlight=undefined">
+        placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}"
+        [(ngModel)]="minutesOfFlight"
+        name="minutesOfFlight"
+        type="number"
+      />
+      <button
+        *ngIf="minutesOfFlight"
+        matSuffix
+        mat-icon-button
+        aria-label="Clear"
+        (click)="minutesOfFlight = undefined"
+      >
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field>
-      <mat-label>{{ 'NewTunnelFlight_Comments_Lbl' | translate }}</mat-label>
+      <mat-label>{{ "NewTunnelFlight_Comments_Lbl" | translate }}</mat-label>
-      <textarea matInput placeholder="{{ 'NewTunnelFlight_Comments' | translate }}" [(ngModel)]="comments"
+      <textarea
-        name="comments" type="text"></textarea>
+        matInput
-      <button *ngIf="comments" matSuffix mat-icon-button aria-label="Clear" (click)="comments=undefined">
+        placeholder="{{ 'NewTunnelFlight_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()">{{ 'NewTunnelFlight_Submit' | translate }}</button>
+    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">
+      {{ "NewTunnelFlight_Submit" | translate }}
+    </button>
   </form>
 
   <ng-template #loading>

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts

@@ -14,6 +14,7 @@ import { MatAutocompleteModule } from "@angular/material/autocomplete";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatDatepickerModule } from "@angular/material/datepicker";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { FormsModule } from "@angular/forms";
 
 import { TunnelResp } from "../../models/tunnel";
 
@@ -57,6 +58,7 @@ class PickDateAdapter extends NativeDateAdapter {
     RouterLink,
     MatDatepickerModule,
     MatProgressSpinnerModule,
+    FormsModule,
   ],
 })
 export class NewTunnelFlightComponent implements OnInit {

Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts

@@ -1,5 +1,10 @@
 import { Component, OnInit } from "@angular/core";
-import { FormGroup, FormControl, Validators } from "@angular/forms";
+import {
+  FormGroup,
+  FormControl,
+  Validators,
+  ReactiveFormsModule,
+} from "@angular/forms";
 import { AuthenticationService } from "../../services/authentication.service";
 import { User } from "../../models/user";
 import { ListOfImagesComponent } from "../list-of-images/list-of-images.component";
@@ -15,6 +20,7 @@ import { TranslateModule } from "@ngx-translate/core";
     MatLabel,
     MatFormFieldModule,
     TranslateModule,
+    ReactiveFormsModule,
   ],
 })
 export class UserProfileComponent implements OnInit {