reformattage complet d'IntelliJ

README.md

@@ -4,15 +4,18 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change
+any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Run `ng generate component component-name` to generate a new component. You can also
+use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag
+for a production build.
 
 ## Running unit tests
 
@@ -24,4 +27,5 @@ Run `ng e2e` to execute the end-to-end tests via a platform of your choice.
 
 ## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+To get more help on the Angular CLI use `ng help` or go check out
+the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

src/app/app-routing.module.ts

@@ -38,4 +38,5 @@ const routes : Routes = [
   exports: [RouterModule]
 })
 
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -8,25 +8,31 @@
   <nav>
     <button routerLink="/agences">Agences</button>
   </nav>
-  <div class="d-inline-block" ngbDropdown #dropCollaborateur="ngbDropdown">
+  <div #dropCollaborateur="ngbDropdown" class="d-inline-block" ngbDropdown>
-    <button type="button" id="dropdownCollaborateur" ngbDropdownAnchor (focus)="dropCollaborateur.open()">Collaborateurs</button>
+    <button (focus)="dropCollaborateur.open()" id="dropdownCollaborateur" ngbDropdownAnchor type="button">
-    <div ngbDropdownMenu aria-labelledby="dropdownCollaborateur">
+      Collaborateurs
+    </button>
+    <div aria-labelledby="dropdownCollaborateur" ngbDropdownMenu>
       <button ngbDropdownItem routerLink="/collaborateurs">Liste</button>
       <button ngbDropdownItem routerLink="/collaborateurs/add">Ajouter</button>
     </div>
   </div>
 
-  <div class="d-inline-block" ngbDropdown #dropReferencement="ngbDropdown">
+  <div #dropReferencement="ngbDropdown" class="d-inline-block" ngbDropdown>
-    <button type="button" id="dropdownReferencement" ngbDropdownAnchor (focus)="dropReferencement.open()">Référencements</button>
+    <button (focus)="dropReferencement.open()" id="dropdownReferencement" ngbDropdownAnchor type="button">
-    <div ngbDropdownMenu aria-labelledby="dropdownReferencement">
+      Référencements
+    </button>
+    <div aria-labelledby="dropdownReferencement" ngbDropdownMenu>
       <button ngbDropdownItem routerLink="/referencements">Liste</button>
       <button ngbDropdownItem routerLink="/referencements/add">Ajouter</button>
     </div>
   </div>
 
-  <div class="d-inline-block" ngbDropdown #dropPeriodeEssai="ngbDropdown">
+  <div #dropPeriodeEssai="ngbDropdown" class="d-inline-block" ngbDropdown>
-    <button type="button" id="dropdownPeriodeEssai" ngbDropdownAnchor (focus)="dropPeriodeEssai.open()">Périodes d'essai</button>
+    <button (focus)="dropPeriodeEssai.open()" id="dropdownPeriodeEssai" ngbDropdownAnchor type="button">Périodes
-    <div ngbDropdownMenu aria-labelledby="dropdownPeriodeEssai">
+      d'essai
+    </button>
+    <div aria-labelledby="dropdownPeriodeEssai" ngbDropdownMenu>
       <button ngbDropdownItem routerLink="/periodeessais">Liste</button>
       <button ngbDropdownItem routerLink="/periodeessais/add">Ajouter</button>
     </div>

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Title} from "@angular/platform-browser";
-import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {filter} from 'rxjs/operators';
 
 
@@ -23,7 +23,8 @@ export class AppComponent implements OnInit  {
     ).subscribe(() => {
       const rt = this.getChild(this.activatedRoute);
       rt.data.subscribe(data => {
-        this.titleService.setTitle(data.title)});
+        this.titleService.setTitle(data.title)
+      });
     });
   }
 

src/app/components/agence/agence-edit/agence-edit.component.html

@@ -1,17 +1,17 @@
-
 <div *ngIf="agence">
 
   <h2>{{agence.name | uppercase}} </h2>
   <div><span>id : </span>{{agence.id}}</div>
 
   <form
+    (ngSubmit)="onSubmit()"
     *ngIf="agenceObservable | async;"
-    [formGroup]="registerForm"
+    [formGroup]="registerForm">
-    (ngSubmit)="onSubmit()" >
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Nom</label>
-      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="agence.name">
+      <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="agence.name" class="form-control"
+             formControlName="name">
       <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
         <div *ngIf="f.name.errors.required">Le nom d'une agence est obligatoire</div>
       </div>
@@ -19,23 +19,26 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Business Unit</label>
-      <select class="form-select" formControlName="businessUnitId" id="businessUnit-select" [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+      <select [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }" class="form-select"
-        <option value="" disabled selected>Choisissez la business unit de cette agence</option>
+              formControlName="businessUnitId"
+              id="businessUnit-select">
+        <option disabled selected value="">Choisissez la business unit de cette agence</option>
         <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}}</option>
       </select>
       <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
-        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient l'agence </div>
+        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient
+          l'agence
+        </div>
       </div>
     </div>
 
 
     <div>
       <button type="submit">Sauvegarder les changements</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="onReset()" type="reset">Effacer</button>
       <button (click)="goBack()">Retour</button>
     </div>
   </form>
 
 
-
 </div>

src/app/components/agence/agence-edit/agence-edit.component.ts

@@ -37,6 +37,10 @@ export class AgenceEditComponent implements OnInit {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
 
+  get f() {
+    return this.registerForm.controls;
+  }
+
   async ngOnInit(): Promise<void> {
     this.getBusinessUnits()
     this.registerForm = this.formBuilder.group({
@@ -75,8 +79,6 @@ export class AgenceEditComponent implements OnInit {
     }
   }
 
-  get f() { return this.registerForm.controls; }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

src/app/components/agence/agence.component.html

@@ -2,11 +2,11 @@
 
   <h3>Ajouter une agence : </h3>
 
-  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+  <form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Nom</label>
-      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
+      <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" class="form-control" formControlName="name">
       <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
         <div *ngIf="f.name.errors.required">Le nom d'une agence est obligatoire</div>
       </div>
@@ -14,25 +14,29 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Business Unit</label>
-      <select class="form-select" formControlName="businessUnitId" id="businessUnit-select" [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+      <select [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }" class="form-select"
-        <option value="" disabled selected>Choisissez la business unit de cette agence</option>
+              formControlName="businessUnitId"
+              id="businessUnit-select">
+        <option disabled selected value="">Choisissez la business unit de cette agence</option>
         <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}}</option>
       </select>
       <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
-        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient l'agence </div>
+        <div *ngIf="f.businessUnitId.errors.required">Vous devez choisir la business unit à laquelle appartient
+          l'agence
+        </div>
       </div>
     </div>
 
 
     <div>
       <button type="submit">Créer l'agence</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="onReset()" type="reset">Effacer</button>
     </div>
   </form>
 
   <h2 class=mb-4>Agences</h2>
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>
@@ -51,6 +55,4 @@
   </div>
 
 
-
-
 </div>

src/app/components/agence/agence.component.ts

@@ -27,7 +27,12 @@ export class AgenceComponent implements OnInit {
     private businessUnitService: BusinessunitService,
     private formBuilder: FormBuilder,
     private toastr: ToastrService
-  ) { }
+  ) {
+  }
+
+  get f() {
+    return this.registerForm.controls;
+  }
 
   ngOnInit(): void {
     this.getAgences();
@@ -70,8 +75,6 @@ export class AgenceComponent implements OnInit {
     this.add(this.agence)
   }
 
-  get f() { return this.registerForm.controls; }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

src/app/components/businessunit/businessunit-edit/businessunit-edit.component.html

@@ -1,17 +1,16 @@
-
 <div *ngIf="businessunit">
 
   <h2>{{bu.name | uppercase}} </h2>
   <div><span>id : </span>{{bu.id}}</div>
 
   <form
+    (ngSubmit)="onSubmit()"
     *ngIf="businessunit | async;"
-    [formGroup]="registerForm"
+    [formGroup]="registerForm">
-    (ngSubmit)="onSubmit()" >
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Nom</label>
-      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
+      <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" class="form-control" formControlName="name">
       <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
         <div *ngIf="f.name.errors.required">Le nom d'une business unit est obligatoire</div>
       </div>
@@ -19,7 +18,7 @@
 
     <div>
       <button type="submit">Sauvegarder les changements</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="onReset()" type="reset">Effacer</button>
       <button (click)="goBack()">Retour</button>
     </div>
   </form>

src/app/components/businessunit/businessunit-edit/businessunit-edit.component.ts

@@ -32,6 +32,10 @@ export class BusinessunitEditComponent implements OnInit {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
 
+  get f() {
+    return this.registerForm.controls;
+  }
+
   async ngOnInit() {
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required]
@@ -59,8 +63,6 @@ export class BusinessunitEditComponent implements OnInit {
     }
   }
 
-  get f() { return this.registerForm.controls; }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

src/app/components/businessunit/businessunit.component.html

@@ -2,11 +2,11 @@
 
   <h3>Ajouter une Business Unit : </h3>
 
-  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+  <form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Nom</label>
-      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
+      <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" class="form-control" formControlName="name">
       <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
         <div *ngIf="f.name.errors.required">Le nom d'une business unit est obligatoire</div>
       </div>
@@ -14,13 +14,13 @@
 
     <div>
       <button type="submit">Créer la business unit</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="onReset()" type="reset">Effacer</button>
     </div>
   </form>
 
   <h2 class=mb-4>Business Units</h2>
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>

src/app/components/businessunit/businessunit.component.ts

@@ -27,6 +27,10 @@ export class BusinessunitComponent implements OnInit {
   ) {
   }
 
+  get f() {
+    return this.registerForm.controls;
+  }
+
   ngOnInit(): void {
     this.getBusinessunits();
     this.registerForm = this.formBuilder.group({
@@ -61,10 +65,6 @@ export class BusinessunitComponent implements OnInit {
     this.add(this.businessunit)
   }
 
-  get f() {
-    return this.registerForm.controls;
-  }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html

@@ -1,12 +1,12 @@
 <h3>Ajouter un collaborateur : </h3>
 
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
   <div class="row mb-2">
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Nom</label>
-      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && form.name.errors }">
+      <input [ngClass]="{ 'is-invalid': submitted && form.name.errors }" class="form-control" formControlName="name">
       <div *ngIf="submitted && form.name.errors" class="invalid-feedback">
         <div *ngIf="form.name.errors.required">Le nom d'un collaborateur est obligatoire</div>
       </div>
@@ -14,8 +14,8 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Prénom</label>
-      <input class="form-control" formControlName="firstName"
+      <input [ngClass]="{ 'is-invalid': submitted && form.firstName.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.firstName.errors }">
+             formControlName="firstName">
       <div *ngIf="submitted && form.firstName.errors" class="invalid-feedback">
         <div *ngIf="form.firstName.errors.required">Le prénom d'un collaborateur est obligatoire</div>
       </div>
@@ -23,8 +23,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de naissance</label>
-      <input type="date" class="form-control" formControlName="birthDate" (change)="onBirthDateChange($event)"
+      <input (change)="onBirthDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.birthDate.errors }"
-             [ngClass]="{ 'is-invalid': submitted && form.birthDate.errors }">
+             class="form-control" formControlName="birthDate"
+             type="date">
       <div *ngIf="submitted && form.birthDate.errors" class="invalid-feedback">
         <div *ngIf="form.birthDate.errors.required">La date de naissance d'un collaborateur est obligatoire</div>
       </div>
@@ -32,9 +33,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Genre</label>
-      <select class="form-select" formControlName="gender"
+      <select [ngClass]="{ 'is-invalid': submitted && form.gender.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.gender.errors }">
+              formControlName="gender">
-        <option value="" disabled selected>Genre</option>
+        <option disabled selected value="">Genre</option>
         <option value="MASCULIN">Masculin</option>
         <option value="FEMININ">Féminin</option>
         <option value="AUTRE">Autre</option>
@@ -50,9 +51,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Statut</label>
-      <select class="form-select" formControlName="status"
+      <select [ngClass]="{ 'is-invalid': submitted && form.status.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.status.errors }">
+              formControlName="status">
-        <option value="" disabled selected>Statut</option>
+        <option disabled selected value="">Statut</option>
         <option value="CADRE">Cadre</option>
         <option value="NONCADRE">Non-cadre</option>
         <option value="ALTERNANT">Alternant</option>
@@ -65,9 +66,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Nombre d'enfants</label>
-      <input class="form-control" formControlName="childrenNumber"
+      <input [ngClass]="{ 'is-invalid': submitted && form.childrenNumber.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.childrenNumber.errors }" type="number" min="0"
+             formControlName="childrenNumber" min="0" onkeyup="if(this.value<0){this.value= this.value * -1}"
-             onkeyup="if(this.value<0){this.value= this.value * -1}">
+             type="number">
       <div *ngIf="submitted && form.childrenNumber.errors" class="invalid-feedback">
         <div *ngIf="form.childrenNumber.errors.required">Le nombre d'enfant d'un collaborateur est obligatoire</div>
       </div>
@@ -75,8 +76,8 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Adresse</label>
-      <input class="form-control" formControlName="address"
+      <input [ngClass]="{ 'is-invalid': submitted && form.address.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.address.errors }">
+             formControlName="address">
       <div *ngIf="submitted && form.address.errors" class="invalid-feedback">
         <div *ngIf="form.address.errors.required">L'adresse d'un collaborateur est obligatoire</div>
       </div>
@@ -84,8 +85,8 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Téléphone</label>
-      <input class="form-control" formControlName="telephone"
+      <input [ngClass]="{ 'is-invalid': submitted && form.telephone.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.telephone.errors }">
+             formControlName="telephone">
       <div *ngIf="submitted && form.telephone.errors" class="invalid-feedback">
         <div *ngIf="form.telephone.errors.required">Le numéro de téléphone d'un collaborateur est obligatoire</div>
       </div>
@@ -99,8 +100,9 @@
         <label class="form-label" style="padding-right: 5px">Mail personnel</label>
         <small>(pas Apside)</small>
       </div>
-      <input type="email" class="form-control" formControlName="personalMail"
+      <input [ngClass]="{ 'is-invalid': submitted && form.personalMail.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.personalMail.errors }" placeholder="prenom.nom@example.com">
+             formControlName="personalMail"
+             placeholder="prenom.nom@example.com" type="email">
       <div *ngIf="submitted && form.personalMail.errors" class="invalid-feedback">
         <div *ngIf="form.personalMail.errors.required">Le mail personnel d'un collaborateur est obligatoire</div>
         <div *ngIf="form.personalMail.errors.pattern">Le mail personnel d'un collaborateur doit être au format
@@ -111,9 +113,10 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Mail Apside</label>
-      <input type="email" class="form-control" formControlName="apsideMail"
+      <input [ngClass]="{ 'is-invalid': (submitted && form.apsideMail.errors) || errorValue==1 }"
-             [ngClass]="{ 'is-invalid': (submitted && form.apsideMail.errors) || errorValue==1 }"
+             [value]="collaborateur.apsideMail" class="form-control"
-             placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail">
+             formControlName="apsideMail"
+             placeholder="prenom.nom@apside-groupe.com" type="email">
       <div *ngIf="submitted && form.apsideMail.errors" class="invalid-feedback">
         <div *ngIf="form.apsideMail.errors.required">Le mail Apside d'un collaborateur est obligatoire</div>
         <div *ngIf="form.apsideMail.errors.pattern">Le mail Apside d'un collaborateur doit être au format
@@ -128,9 +131,10 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de départ</label>
-      <input type="date" class="form-control" formControlName="resignationDate"
+      <input (change)="onResignationDateChange($event)"
-             (change)="onResignationDateChange($event)"
+             [ngClass]="{ 'is-invalid': submitted && form.resignationDate.errors }" class="form-control"
-             [ngClass]="{ 'is-invalid': submitted && form.resignationDate.errors }">
+             formControlName="resignationDate"
+             type="date">
       <div *ngIf="submitted && form.resignationDate.errors" class="invalid-feedback">
         <div *ngIf="form.resignationDate.errors.required">La date de départ d'un collaborateur est obligatoire</div>
       </div>
@@ -142,9 +146,9 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Business Unit</label>
-      <select class="form-select" formControlName="businessUnitId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.businessUnitId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.businessUnitId.errors }">
+              formControlName="businessUnitId">
-        <option value="" disabled selected>Choisissez une Business Unit pour le collaborateur</option>
+        <option disabled selected value="">Choisissez une Business Unit pour le collaborateur</option>
         <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}} </option>
       </select>
       <div *ngIf="submitted && form.businessUnitId.errors" class="invalid-feedback">
@@ -156,6 +160,6 @@
 
   <div>
     <button type="submit">Ajouter le collaborateur</button>
-    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
   </div>
 </form>

src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts

@@ -33,6 +33,10 @@ export class CollaborateurAddComponent implements OnInit {
               private toastr: ToastrService) {
   }
 
+  get form() {
+    return this.registerForm.controls;
+  }
+
   ngOnInit(): void {
     this.getCollaborateurs();
     this.getBusinessunits();
@@ -86,10 +90,6 @@ export class CollaborateurAddComponent implements OnInit {
     }
   }
 
-  get form() {
-    return this.registerForm.controls;
-  }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.html

@@ -4,15 +4,16 @@
 
   <div><label class="form-label">ID : </label>{{collaborateur.id}}</div>
 
-  <form [formGroup]="registerForm"
+  <form (ngSubmit)="onSubmit()"
-        (ngSubmit)="onSubmit()">
+        [formGroup]="registerForm">
 
     <div class="row mb-2">
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Nom</label>
-        <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }"
+        <input [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="collaborateur.name"
-               [value]="collaborateur.name">
+               class="form-control"
+               formControlName="name">
         <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
           <div *ngIf="f.name.errors.required">Le nom d'un collaborateur est obligatoire</div>
         </div>
@@ -20,8 +21,8 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Prénom</label>
-        <input class="form-control" formControlName="firstName"
+        <input [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" [value]="collaborateur.firstName"
-               [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" [value]="collaborateur.firstName">
+               class="form-control" formControlName="firstName">
         <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
           <div *ngIf="f.firstName.errors.required">Le prénom d'un collaborateur est obligatoire</div>
         </div>
@@ -29,9 +30,10 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Date de naissance</label>
-        <input type="date" [value]="collaborateur.birthDate | date:'yyyy-MM-dd'" class="form-control"
+        <input (change)="onBirthDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.birthDate.errors }"
-               formControlName="birthDate" (change)="onBirthDateChange($event)"
+               [value]="collaborateur.birthDate | date:'yyyy-MM-dd'"
-               [ngClass]="{ 'is-invalid': submitted && f.birthDate.errors }">
+               class="form-control" formControlName="birthDate"
+               type="date">
         <div *ngIf="submitted && f.birthDate.errors" class="invalid-feedback">
           <div *ngIf="f.birthDate.errors.required">La date de naissance d'un collaborateur est obligatoire</div>
         </div>
@@ -39,9 +41,10 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Genre</label>
-        <select class="form-select" formControlName="gender" [ngClass]="{ 'is-invalid': submitted && f.gender.errors }"
+        <select [ngClass]="{ 'is-invalid': submitted && f.gender.errors }" [value]="collaborateur.gender"
-                [value]="collaborateur.gender">
+                class="form-select"
-          <option value="" disabled selected>Genre</option>
+                formControlName="gender">
+          <option disabled selected value="">Genre</option>
           <option value="MASCULIN">Masculin</option>
           <option value="FEMININ">Féminin</option>
           <option value="AUTRE">Autre</option>
@@ -57,9 +60,10 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Statut</label>
-        <select class="form-select" formControlName="status" [ngClass]="{ 'is-invalid': submitted && f.status.errors }"
+        <select [ngClass]="{ 'is-invalid': submitted && f.status.errors }" [value]="collaborateur.status"
-                [value]="collaborateur.status">
+                class="form-select"
-          <option value="" disabled selected>Statut</option>
+                formControlName="status">
+          <option disabled selected value="">Statut</option>
           <option value="CADRE">Cadre</option>
           <option value="NONCADRE">Non-cadre</option>
           <option value="ALTERNANT">Alternant</option>
@@ -72,9 +76,9 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Nombre d'enfants</label>
-        <input class="form-control" formControlName="childrenNumber"
+        <input [ngClass]="{ 'is-invalid': submitted && f.childrenNumber.errors }" [value]="collaborateur.childrenNumber"
-               [ngClass]="{ 'is-invalid': submitted && f.childrenNumber.errors }" type="number" min="0"
+               class="form-control" formControlName="childrenNumber" min="0"
-               onkeyup="if(this.value<0){this.value= this.value * -1}" [value]="collaborateur.childrenNumber">
+               onkeyup="if(this.value<0){this.value= this.value * -1}" type="number">
         <div *ngIf="submitted && f.childrenNumber.errors" class="invalid-feedback">
           <div *ngIf="f.childrenNumber.errors.required">Le nombre d'enfant d'un collaborateur est obligatoire</div>
         </div>
@@ -82,8 +86,8 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Adresse</label>
-        <input class="form-control" formControlName="address"
+        <input [ngClass]="{ 'is-invalid': submitted && f.address.errors }" [value]="collaborateur.address"
-               [ngClass]="{ 'is-invalid': submitted && f.address.errors }" [value]="collaborateur.address">
+               class="form-control" formControlName="address">
         <div *ngIf="submitted && f.address.errors" class="invalid-feedback">
           <div *ngIf="f.address.errors.required">L'adresse d'un collaborateur est obligatoire</div>
         </div>
@@ -91,8 +95,8 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Téléphone</label>
-        <input class="form-control" formControlName="telephone"
+        <input [ngClass]="{ 'is-invalid': submitted && f.telephone.errors }" [value]="collaborateur.telephone"
-               [ngClass]="{ 'is-invalid': submitted && f.telephone.errors }" [value]="collaborateur.telephone">
+               class="form-control" formControlName="telephone">
         <div *ngIf="submitted && f.telephone.errors" class="invalid-feedback">
           <div *ngIf="f.telephone.errors.required">Le numéro de téléphone d'un collaborateur est obligatoire</div>
         </div>
@@ -106,9 +110,10 @@
           <label class="form-label" style="padding-right: 5px">Mail personnel</label>
           <small>(pas Apside)</small>
         </div>
-        <input type="email" class="form-control" formControlName="personalMail"
+        <input [ngClass]="{ 'is-invalid': submitted && f.personalMail.errors }" [value]="collaborateur.personalMail"
-               [ngClass]="{ 'is-invalid': submitted && f.personalMail.errors }" placeholder="prenom.nom@example.com"
+               class="form-control"
-               [value]="collaborateur.personalMail">
+               formControlName="personalMail" placeholder="prenom.nom@example.com"
+               type="email">
         <div *ngIf="submitted && f.personalMail.errors" class="invalid-feedback">
           <div *ngIf="f.personalMail.errors.required">Le mail personnel d'un collaborateur est obligatoire</div>
           <div *ngIf="f.personalMail.errors.pattern">Le mail personnel d'un collaborateur doit être au format
@@ -119,9 +124,10 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Mail Apside</label>
-        <input type="email" class="form-control" formControlName="apsideMail"
+        <input [ngClass]="{ 'is-invalid': (submitted && f.apsideMail.errors) || errorValue==1 }"
-               [ngClass]="{ 'is-invalid': (submitted && f.apsideMail.errors) || errorValue==1 }"
+               [value]="collaborateur.apsideMail" class="form-control"
-               placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail">
+               formControlName="apsideMail"
+               placeholder="prenom.nom@apside-groupe.com" type="email">
         <div *ngIf="submitted && f.apsideMail.errors" class="invalid-feedback">
           <div *ngIf="f.apsideMail.errors.required">Le mail Apside d'un collaborateur est obligatoire</div>
           <div *ngIf="f.apsideMail.errors.pattern">Le mail Apside d'un collaborateur doit être au format
@@ -136,9 +142,11 @@
 
       <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
         <label class="form-label">Date de départ</label>
-        <input type="date" [value]="collaborateur.resignationDate | date:'yyyy-MM-dd'" class="form-control"
+        <input (change)="onResignationDateChange($event)"
-               formControlName="resignationDate" (change)="onResignationDateChange($event)"
+               [ngClass]="{ 'is-invalid': submitted && f.resignationDate.errors }"
-               [ngClass]="{ 'is-invalid': submitted && f.resignationDate.errors }">
+               [value]="collaborateur.resignationDate | date:'yyyy-MM-dd'"
+               class="form-control" formControlName="resignationDate"
+               type="date">
       </div>
 
     </div>
@@ -147,9 +155,9 @@
 
       <div class="form-group col-12 col-md-6">
         <label class="form-label">Business Unit</label>
-        <select class="form-select" formControlName="businessUnitId"
+        <select [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }" class="form-select"
-                [ngClass]="{ 'is-invalid': submitted && f.businessUnitId.errors }">
+                formControlName="businessUnitId">
-          <option value="" disabled selected>Choisissez une Business Unit pour le collaborateur</option>
+          <option disabled selected value="">Choisissez une Business Unit pour le collaborateur</option>
           <option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}} </option>
         </select>
         <div *ngIf="submitted && f.businessUnitId.errors" class="invalid-feedback">
@@ -162,7 +170,7 @@
     <div>
       <button type="submit">Sauvegarder les changements</button>
       <button (click)="delete()">Supprimer le collaborateur</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="onReset()" type="reset">Effacer</button>
       <button (click)="goBack()">Retour</button>
     </div>
   </form>

src/app/components/collaborateur/collaborateur-edit/collaborateur-edit.component.ts

@@ -39,6 +39,10 @@ export class CollaborateurEditComponent implements OnInit {
     this.id = Number(this.route.snapshot.paramMap.get('id'))
   }
 
+  get f() {
+    return this.registerForm.controls;
+  }
+
   async ngOnInit() {
     this.getCollaborateurs()
     this.getBusinessunits();
@@ -115,11 +119,6 @@ export class CollaborateurEditComponent implements OnInit {
     }
   }
 
-
-  get f() {
-    return this.registerForm.controls;
-  }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

src/app/components/collaborateur/collaborateur.component.html

@@ -8,7 +8,7 @@
   </div>
 
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>

src/app/components/collaborateur/collaborateur.component.ts

@@ -46,5 +46,4 @@ export class CollaborateurComponent implements OnInit {
   }
 
 
-
 }

src/app/components/home/home.component.ts

@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit(): void {
   }

src/app/components/periode-essai/periode-essai-add/periode-essai-add.component.html

@@ -1,12 +1,12 @@
 <h3>Ajouter une Période d'essai : </h3>
 
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
   <div class="form-group col-12 col-md-6">
     <label class="form-label">Collaborateur</label>
-    <select class="form-select" formControlName="collaborateurId" id="collaborateur-select"
+    <select [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }" class="form-select" formControlName="collaborateurId"
-            [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }">
+            id="collaborateur-select">
-      <option value="" disabled selected>Choisissez le collaborateur concerné par cette période d'essai</option>
+      <option disabled selected value="">Choisissez le collaborateur concerné par cette période d'essai</option>
       <option *ngFor="let collaborateur of collaborateurs"
               [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
     </select>
@@ -20,8 +20,8 @@
   <div class="row mb-2">
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de début</label>
-      <input type="date" class="form-control" formControlName="startingDate" (change)="onStartingDateChange($event)"
+      <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }" class="form-control" formControlName="startingDate"
-             [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }">
+             type="date">
       <div *ngIf="submitted && f.startingDate.errors" class="invalid-feedback">
         <div *ngIf="f.startingDate.errors.required">La date de début d'une période d'essai est obligatoire</div>
       </div>
@@ -29,9 +29,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de fin prévue</label>
-      <input type="date" class="form-control" formControlName="plannedEndingDate"
+      <input (change)="onPlannedEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }" class="form-control"
-             (change)="onPlannedEndingDateChange($event)"
+             formControlName="plannedEndingDate"
-             [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }">
+             type="date">
       <div *ngIf="submitted && f.plannedEndingDate.errors" class="invalid-feedback">
         <div *ngIf="f.plannedEndingDate.errors.required">La date de fin prévue d'une période d'essai est obligatoire
         </div>
@@ -40,8 +40,8 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de fin réelle</label>
-      <input type="date" class="form-control" formControlName="realEndingDate"
+      <input (change)="onRealEndingDateChange($event)" class="form-control" formControlName="realEndingDate"
-             (change)="onRealEndingDateChange($event)">
+             type="date">
     </div>
   </div>
 
@@ -49,13 +49,13 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Commentaire</label>
-      <input class="form-control" formControlName="comment" [ngClass]="{ 'is-invalid': submitted && f.comment.errors }">
+      <input [ngClass]="{ 'is-invalid': submitted && f.comment.errors }" class="form-control" formControlName="comment">
     </div>
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Issue</label>
       <select class="form-select" formControlName="issue">
-        <option value="" disabled selected>Statut</option>
+        <option disabled selected value="">Statut</option>
         <option value="VALIDEE">Validée</option>
         <option value="PROLONGEE_COLLAB">Prolongée par le collaborateur</option>
         <option value="PROLONGEE_APSIDE">Prolongée par Apside</option>
@@ -68,6 +68,6 @@
 
   <div>
     <button type="submit">Créer la période d'essai</button>
-    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
   </div>
 </form>

src/app/components/periode-essai/periode-essai-edit/periode-essai-edit.component.html

@@ -2,14 +2,14 @@
 
   <h3>Modifier une Période d'essai : </h3>
 
-  <form [formGroup]="registerForm"
+  <form (ngSubmit)="onSubmit()"
-        (ngSubmit)="onSubmit()">
+        [formGroup]="registerForm">
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Collaborateur</label>
-      <select class="form-select" formControlName="collaborateurId" id="collaborateur-select"
+      <select [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }" class="form-select" formControlName="collaborateurId"
-              [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }">
+              id="collaborateur-select">
-        <option value="" disabled selected>Choisissez le collaborateur concerné par cette période d'essai</option>
+        <option disabled selected value="">Choisissez le collaborateur concerné par cette période d'essai</option>
         <option *ngFor="let collaborateur of collaborateurs"
                 [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
@@ -22,9 +22,9 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de début</label>
-      <input type="date" [value]="periodeEssai.startingDate | date:'yyyy-MM-dd'" class="form-control"
+      <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }" [value]="periodeEssai.startingDate | date:'yyyy-MM-dd'"
-             formControlName="startingDate" (change)="onStartingDateChange($event)"
+             class="form-control" formControlName="startingDate"
-             [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }">
+             type="date">
       <div *ngIf="submitted && f.startingDate.errors" class="invalid-feedback">
         <div *ngIf="f.startingDate.errors.required">La date de début d'une période d'essai est obligatoire</div>
       </div>
@@ -32,10 +32,10 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de fin prévue</label>
-      <input type="date" [value]="periodeEssai.plannedEndingDate | date:'yyyy-MM-dd'" class="form-control"
+      <input (change)="onPlannedEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }" [value]="periodeEssai.plannedEndingDate | date:'yyyy-MM-dd'"
+             class="form-control"
              formControlName="plannedEndingDate"
-             (change)="onPlannedEndingDateChange($event)"
+             type="date">
-             [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }">
       <div *ngIf="submitted && f.plannedEndingDate.errors" class="invalid-feedback">
         <div *ngIf="f.plannedEndingDate.errors.required">La date de fin prévue d'une période d'essai est obligatoire
         </div>
@@ -44,8 +44,8 @@
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de fin réelle</label>
-      <input type="date" [value]="periodeEssai.realEndingDate | date:'yyyy-MM-dd'" class="form-control"
+      <input (change)="onRealEndingDateChange($event)" [value]="periodeEssai.realEndingDate | date:'yyyy-MM-dd'" class="form-control"
-             formControlName="realEndingDate" (change)="onRealEndingDateChange($event)">
+             formControlName="realEndingDate" type="date">
     </div>
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
@@ -56,7 +56,7 @@
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
       <label class="form-label">Issue</label>
       <select class="form-select" formControlName="issue">
-        <option value="" disabled selected>Statut</option>
+        <option disabled selected value="">Statut</option>
         <option value="VALIDEE">Validée</option>
         <option value="PROLONGEE_COLLAB">Prolongée par le collaborateur</option>
         <option value="PROLONGEE_APSIDE">Prolongée par Apside</option>
@@ -67,9 +67,9 @@
     </div>
 
     <div>
-      <button type="submit" (click)="onSubmit()">Sauvegarder les changements</button>
+      <button (click)="onSubmit()" type="submit">Sauvegarder les changements</button>
-      <button type="button" (click)="delete()">Supprimer la période d'essai</button>
+      <button (click)="delete()" type="button">Supprimer la période d'essai</button>
-      <button type="reset" (click)="onReset()">Effacer</button>
+      <button (click)="onReset()" type="reset">Effacer</button>
       <button (click)="goBack()">Retour</button>
     </div>
 

src/app/components/periode-essai/periode-essai.component.html

@@ -7,7 +7,7 @@
     <button routerLink="/periodeessais/add">Ajouter</button>
   </div>
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>

src/app/components/referencement/referencement-add/referencement-add.component.html

@@ -1,21 +1,21 @@
 <h3>Ajouter un référencement : </h3>
 
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
   <div class="row mb-2">
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de début</label>
-      <input type="date" class="form-control" formControlName="startingDate"
+      <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }" class="form-control"
-             (change)="onStartingDateChange($event)"
+             formControlName="startingDate"
-             [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }">
+             type="date">
     </div>
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de fin</label>
-      <input type="date" class="form-control" formControlName="endingDate"
+      <input (change)="onEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }" class="form-control"
-             (change)="onEndingDateChange($event)"
+             formControlName="endingDate"
-             [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }">
+             type="date">
     </div>
 
   </div>
@@ -24,10 +24,11 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référent</label>
-      <select class="form-select" formControlName="referrerId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }">
+              formControlName="referrerId">
-        <option value="" disabled selected>Choisissez le référent du référencement</option>
+        <option disabled selected value="">Choisissez le référent du référencement</option>
-        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
+        <option *ngFor="let collaborateur of collaborateurs"
+                [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
       <div *ngIf="submitted && form.referrerId.errors" class="invalid-feedback">
         <div *ngIf="form.referrerId.errors.required">Vous devez préciser le référent du référencement</div>
@@ -36,10 +37,11 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référé</label>
-      <select class="form-select" formControlName="referredId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }">
+              formControlName="referredId">
-        <option value="" disabled selected>Choisissez le référé du référencement</option>
+        <option disabled selected value="">Choisissez le référé du référencement</option>
-        <option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
+        <option *ngFor="let collaborateur of collaborateurs"
+                [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
       <div *ngIf="submitted && form.referredId.errors" class="invalid-feedback">
         <div *ngIf="form.referredId.errors.required">Vous devez préciser le référent du référencement</div>
@@ -50,6 +52,6 @@
 
   <div>
     <button type="submit">Ajouter le référencement</button>
-    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
   </div>
 </form>

src/app/components/referencement/referencement-add/referencement-add.component.ts

@@ -32,6 +32,10 @@ export class ReferencementAddComponent implements OnInit {
               private toastr: ToastrService) {
   }
 
+  get form() {
+    return this.registerForm.controls;
+  }
+
   ngOnInit(): void {
     this.getCollaborateurs();
     this.registerForm = this.formBuilder.group({
@@ -70,10 +74,6 @@ export class ReferencementAddComponent implements OnInit {
     }
   }
 
-  get form() {
-    return this.registerForm.controls;
-  }
-
   onReset() {
     this.submitted = false;
     this.registerForm.reset();

src/app/components/referencement/referencement-edit/referencement-edit.component.html

@@ -1,23 +1,23 @@
 <h3>Modifier un référencement : </h3>
 
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+<form (ngSubmit)="onSubmit()" [formGroup]="registerForm">
 
   <div class="row mb-2">
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de début</label>
-      <input type="date" [value]="referencement.startingDate | date:'yyyy-MM-dd'" class="form-control"
+      <input (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }" [value]="referencement.startingDate | date:'yyyy-MM-dd'"
+             class="form-control"
              formControlName="startingDate"
-             (change)="onStartingDateChange($event)"
+             type="date">
-             [ngClass]="{ 'is-invalid': submitted && form.startingDate.errors }">
     </div>
 
     <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
       <label class="form-label">Date de fin</label>
-      <input type="date" [value]="referencement.endingDate | date:'yyyy-MM-dd'" class="form-control"
+      <input (change)="onEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }" [value]="referencement.endingDate | date:'yyyy-MM-dd'"
+             class="form-control"
              formControlName="endingDate"
-             (change)="onEndingDateChange($event)"
+             type="date">
-             [ngClass]="{ 'is-invalid': submitted && form.endingDate.errors }">
     </div>
 
   </div>
@@ -26,9 +26,9 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référent</label>
-      <select class="form-select" formControlName="referrerId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }">
+              formControlName="referrerId">
-        <option value="" disabled selected>Choisissez le référent du référencement</option>
+        <option disabled selected value="">Choisissez le référent du référencement</option>
         <option *ngFor="let collaborateur of collaborateurs"
                 [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
@@ -39,9 +39,9 @@
 
     <div class="form-group col-12 col-md-6">
       <label class="form-label">Référé</label>
-      <select class="form-select" formControlName="referredId"
+      <select [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }" class="form-select"
-              [ngClass]="{ 'is-invalid': submitted && form.referredId.errors }">
+              formControlName="referredId">
-        <option value="" disabled selected>Choisissez le référé du référencement</option>
+        <option disabled selected value="">Choisissez le référé du référencement</option>
         <option *ngFor="let collaborateur of collaborateurs"
                 [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option>
       </select>
@@ -54,8 +54,8 @@
 
   <div>
     <button type="submit">Sauvegarder les changements</button>
-    <button type="button" (click)="delete()">Supprimer le référencement</button>
+    <button (click)="delete()" type="button">Supprimer le référencement</button>
-    <button type="reset" (click)="onReset()">Effacer</button>
+    <button (click)="onReset()" type="reset">Effacer</button>
     <button (click)="goBack()">Retour</button>
   </div>
 </form>

src/app/components/referencement/referencement.component.html

@@ -8,7 +8,7 @@
   </div>
 
 
-  <div style="overflow-x:auto;" class="mb-5 col-12">
+  <div class="mb-5 col-12" style="overflow-x:auto;">
     <table class="table">
       <thead>
       <tr>

src/app/services/agence.service.ts

@@ -8,13 +8,13 @@ import {agencesUrl} from "../../ressources/routes/routesPreprod";
   providedIn: 'root'
 })
 export class AgenceService {
-  private agencesUrl = agencesUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private agencesUrl = agencesUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getAgences(): Observable<Agence[]> {
     return this.http.get<Agence[]>(this.agencesUrl);

src/app/services/businessunit.service.ts

@@ -8,13 +8,13 @@ import {businessunitsUrl} from "../../ressources/routes/routesPreprod";
   providedIn: 'root'
 })
 export class BusinessunitService {
-  private businessunitsUrl = businessunitsUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private businessunitsUrl = businessunitsUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getBusinessunits(): Observable<Businessunit[]> {
     return this.http.get<Businessunit[]>(this.businessunitsUrl);

src/app/services/collaborateur.service.ts

@@ -9,13 +9,13 @@ import {collaborateursUrl} from "../../ressources/routes/routesPreprod";
 
 export class CollaborateurService {
 
-  private collaborateursUrl = collaborateursUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private collaborateursUrl = collaborateursUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getCollaborateurs(): Observable<Collaborateur[]> {
     return this.http.get<Collaborateur[]>(this.collaborateursUrl);

src/app/services/periode-essai.service.ts

@@ -9,13 +9,13 @@ import {PeriodeEssai} from "../interfaces/periode-essai";
   providedIn: 'root'
 })
 export class PeriodeEssaiService {
-  private periodeessaisUrl = periodeessaisUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private periodeessaisUrl = periodeessaisUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getPeriodeEssais(): Observable<PeriodeEssai[]> {
     return this.http.get<PeriodeEssai[]>(this.periodeessaisUrl);

src/app/services/referencement.service.ts

@@ -9,13 +9,13 @@ import {referencementsUrl} from "../../ressources/routes/routesPreprod";
 
 export class ReferencementService {
 
-  private referencementsUrl = referencementsUrl;
-
   httpOptions = {
     headers: new HttpHeaders({'Content-Type': 'application/json'})
   };
+  private referencementsUrl = referencementsUrl;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getReferencements(): Observable<Referencement[]> {
     return this.http.get<Referencement[]>(this.referencementsUrl);

src/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Services Collaborateurs</title>
   <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta content="width=device-width, initial-scale=1" name="viewport">
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

src/styles.scss

@@ -12,6 +12,7 @@ label {
   color: $primary;
   font-weight: bold;
 }
+
 input {
   font-size: 1em;
   padding: .3rem;
@@ -25,9 +26,11 @@ input {
   border-radius: 4px;
 
 }
+
 .form-submit:hover {
   background-color: $primary;
 }
+
 .form-submit:disabled {
   background-color: #eee;
   color: #ccc;
@@ -64,9 +67,11 @@ button {
   border-radius: 4px;
   border-color: transparent;
 }
+
 button:hover {
   background-color: $primary;
 }
+
 button:disabled {
   background-color: #eee;
   color: #ccc;