Transformation en ngform des input pour les agences + suppression de l'agence-detail

src/app/app.module.ts

@@ -6,7 +6,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import {RouterModule} from "@angular/router";
 import { CollaborateurComponent } from './components/collaborateur/collaborateur.component';
 import { CollaborateurEditComponent } from './components/collaborateur/collaborateur-edit/collaborateur-edit.component';
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import { AppRoutingModule } from './app-routing.module';
 import { HomeComponent } from './components/home/home.component';
 import { AgenceComponent } from './components/agence/agence.component';
@@ -15,7 +15,6 @@ import { CollaborateurDetailComponent } from './components/collaborateur/collabo
 import { BusinessunitComponent } from './components/businessunit/businessunit.component';
 import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component';
 import { BusinessunitDetailComponent } from './components/businessunit/businessunit-detail/businessunit-detail.component';
-import { AgenceDetailComponent } from './components/agence/agence-detail/agence-detail.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +24,6 @@ import { AgenceDetailComponent } from './components/agence/agence-detail/agence-
     HomeComponent,
     AgenceComponent,
     AgenceEditComponent,
-    AgenceDetailComponent,
     CollaborateurDetailComponent,
     BusinessunitComponent,
     BusinessunitEditComponent,
@@ -38,7 +36,8 @@ import { AgenceDetailComponent } from './components/agence/agence-detail/agence-
     NgbModule,
     RouterModule,
     FormsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    ReactiveFormsModule
   ],
   providers: [Title],
   bootstrap: [AppComponent]

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

@@ -1,8 +0,0 @@
-<div class="row mb-2">
-
-  <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3">
-
-    <label for="agence-name" class="form-label">Nom</label>
-    <input class="form-control" id="agence-name" [(ngModel)]="agence.name" placeholder="name">
-  </div>
-</div>

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

@@ -1,31 +0,0 @@
-import {Component, Input, OnInit} from '@angular/core';
-import {Agence} from "../../../interfaces/agence";
-import {HttpClient} from "@angular/common/http";
-import {AgenceService} from "../../../services/agence.service";
-@Component({
-  selector: 'app-agence-detail',
-  templateUrl: './agence-detail.component.html',
-  styleUrls: ['./agence-detail.component.scss']
-})
-export class AgenceDetailComponent implements OnInit {
-
-  agences : Agence[] = [];
-  @Input()
-  agence = {} as Agence ;
-
-  constructor(
-    private http : HttpClient,
-    private agenceService: AgenceService,
-  ) { }
-
-  ngOnInit(): void {
-    this.getAgences();
-    this.getAgences();
-  }
-
-  getAgences():void {
-    this.agenceService.getAgences()
-      .subscribe(agences => this.agences = agences);
-  }
-
-}

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

@@ -4,9 +4,25 @@
   <h2>{{agence.name | uppercase}} </h2>
   <div><span>id : </span>{{agence.id}}</div>
 
-  <app-agence-detail [agence]="agence"></app-agence-detail>
+  <form [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">
+      <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
+        <div *ngIf="f.name.errors.required">Le nom d'une agence est obligatoire</div>
+      </div>
+    </div>
+
+
+    <div>
+      <button (click)="goBack()">Retour</button>
+      <button type="submit">Sauvegarder les changements</button>
+      <button (click)="delete()">Supprimer l'agence</button>
+      <button type="reset" (click)="onReset()">Effacer</button>
+    </div>
+  </form>
+
+
 
-  <button (click)="goBack()">Retour</button>
-  <button (click)="save()">Sauvegarder les changements</button>
-  <button (click)="delete()">Supprimer l'agence</button>
 </div>

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

@@ -3,6 +3,7 @@ import {Agence} from "../../../interfaces/agence";
 import {ActivatedRoute} from "@angular/router";
 import {AgenceService} from "../../../services/agence.service";
 import {Location} from "@angular/common";
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   selector: 'app-agence-edit',
@@ -10,16 +11,23 @@ import {Location} from "@angular/common";
   styleUrls: ['./agence-edit.component.scss']
 })
 export class AgenceEditComponent implements OnInit {
-  agence : Agence | undefined;
+  agence = {} as Agence ;
+
+  registerForm!: FormGroup;
+  submitted = false;
 
   constructor(
     private route: ActivatedRoute,
     private agenceService: AgenceService,
-    private location: Location
+    private location: Location,
+    private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
     this.getAgence()
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required]
+    });
   }
 
   getAgence(): void {
@@ -46,4 +54,21 @@ export class AgenceEditComponent implements OnInit {
     }
   }
 
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.agence.name = this.registerForm.value.name
+    this.save()
+  }
+
+  get f() { return this.registerForm.controls; }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
 }

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

@@ -21,9 +21,22 @@
 
   <h3>Ajouter une agence : </h3>
 
-  <app-agence-detail [agence]="agence"></app-agence-detail>
+  <form [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 }">
+      <div *ngIf="submitted && f.name.errors" class="invalid-feedback">
+        <div *ngIf="f.name.errors.required">Le nom d'une agence est obligatoire</div>
+      </div>
+    </div>
+
+
+    <div>
+      <button type="submit">Créer l'agence</button>
+      <button type="reset" (click)="onReset()">Effacer</button>
+    </div>
+  </form>
+
 
-  <button class="add-button" (click)="add(agence)">
-    Ajouter une Agence
-  </button>
 </div>

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {Agence} from "../../interfaces/agence";
 import {HttpClient} from "@angular/common/http";
 import {AgenceService} from "../../services/agence.service";
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   selector: 'app-agence',
@@ -12,13 +13,20 @@ export class AgenceComponent implements OnInit {
   agences : Agence[] = [];
   agence = {} as Agence ;
 
+  registerForm!: FormGroup;
+  submitted = false;
+
   constructor(
     private http : HttpClient,
     private agenceService: AgenceService,
+    private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
     this.getAgences();
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required]
+    });
   }
 
   getAgences():void {
@@ -32,4 +40,22 @@ export class AgenceComponent implements OnInit {
         this.agences.push(agence);
       });
   }
+
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.agence = this.registerForm.value
+    this.add(this.agence)
+  }
+
+  get f() { return this.registerForm.controls; }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
 }

src/styles.scss

@@ -36,7 +36,21 @@ button:disabled {
   cursor: auto;
 }
 
+.form-submit {
+  text-decoration: none;
+  background-color: $secondary;
+  color: white;
+  border-radius: 4px;
 
+}
+.form-submit:hover {
+  background-color: $primary;
+}
+.form-submit:disabled {
+  background-color: #eee;
+  color: #ccc;
+  cursor: auto;
+}
 
 .entities {
   margin: 0 0 2em 0;
@@ -72,14 +86,6 @@ button:disabled {
   color: #fafafa;
 }
 
-.spaced{
-  padding : 0 25px;
-}
-
-.list {
-
-}
-
 input{
   margin: 0 15px 0 0;
 }