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

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

@@ -4,9 +4,32 @@
   <h2>{{businessunit.name | uppercase}} </h2>
   <div><span>id : </span>{{businessunit.id}}</div>
 
-  <app-businessunit-detail [businessunit]="businessunit"></app-businessunit-detail>
+  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
 
-  <button (click)="goBack()">Retour</button>
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
-  <button (click)="save()">Sauvegarder les changements</button>
+      <label class="form-label">Nom</label>
-  <button (click)="delete()">Supprimer le businessunit</button>
+      <input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="businessunit.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>
+    </div>
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Agence</label>
+      <select class="form-select" formControlName="agenceId" id="agence-select" [ngClass]="{ 'is-invalid': submitted && f.agenceId.errors }">
+        <option value="" disabled selected>Choisissez l'agence de cette business unit</option>
+        <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
+      </select>
+      <div *ngIf="submitted && f.agenceId.errors" class="invalid-feedback">
+        <div *ngIf="f.agenceId.errors.required">Vous devez choisir l'agence à laquelle appartient la business unit</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>
 </div>

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

@@ -3,6 +3,9 @@ import {Businessunit} from "../../../interfaces/businessunit";
 import {ActivatedRoute} from "@angular/router";
 import {BusinessunitService} from "../../../services/businessunit.service";
 import {Location} from "@angular/common";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {Agence} from "../../../interfaces/agence";
+import {AgenceService} from "../../../services/agence.service";
 
 @Component({
   selector: 'app-businessunit-edit',
@@ -11,16 +14,34 @@ import {Location} from "@angular/common";
 })
 export class BusinessunitEditComponent implements OnInit {
 
-  businessunit : Businessunit | undefined;
+  businessunit = {} as Businessunit ;
+  agences : Agence[] = [];
+  agence = {} as Agence ;
+
+
+  registerForm!: FormGroup;
+  submitted = false;
 
   constructor(
     private route: ActivatedRoute,
     private businessunitService: BusinessunitService,
-    private location: Location
+    private agenceService: AgenceService,
+    private location: Location,
+    private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
-    this.getBusinessunit()
+    this.getBusinessunit();
+    this.getAgences();
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      agenceId: ['',Validators.required]
+    });
+  }
+
+  getAgences():void {
+    this.agenceService.getAgences()
+      .subscribe(agences => this.agences = agences);
   }
 
   getBusinessunit(): void {
@@ -47,4 +68,22 @@ export class BusinessunitEditComponent implements OnInit {
     }
   }
 
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.businessunit.name = this.registerForm.value.name
+    this.businessunit.agenceId = this.registerForm.value.agenceId
+    this.save()
+  }
+
+  get f() { return this.registerForm.controls; }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
 }

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

@@ -20,9 +20,30 @@
   </div>
   <h3>Ajouter une Business Unit : </h3>
 
-  <app-businessunit-detail [businessunit]="businessunit"></app-businessunit-detail>
+  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
 
-  <button class="add-button" (click)="add(businessunit)">
+    <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2">
-    Ajouter une businessunit
+      <label class="form-label">Nom</label>
-  </button>
+      <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 business unit est obligatoire</div>
+      </div>
+    </div>
+
+    <div class="form-group col-12 col-md-6">
+      <label class="form-label">Agence</label>
+      <select class="form-select" formControlName="agenceId" id="agence-select" [ngClass]="{ 'is-invalid': submitted && f.agenceId.errors }">
+        <option value="" disabled selected>Choisissez l'agence de cette business unit</option>
+        <option *ngFor="let agence of agences" [ngValue]="agence.id">{{agence.name}}</option>
+      </select>
+      <div *ngIf="submitted && f.agenceId.errors" class="invalid-feedback">
+        <div *ngIf="f.agenceId.errors.required">Vous devez choisir l'agence à laquelle appartient la business unit</div>
+      </div>
+    </div>
+
+    <div>
+      <button type="submit">Créer la business unit</button>
+      <button type="reset" (click)="onReset()">Effacer</button>
+    </div>
+  </form>
 </div>

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

@@ -4,6 +4,7 @@ import {HttpClient} from "@angular/common/http";
 import {BusinessunitService} from "../../services/businessunit.service";
 import {Agence} from "../../interfaces/agence";
 import {AgenceService} from "../../services/agence.service";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-businessunit',
@@ -17,15 +18,23 @@ export class BusinessunitComponent implements OnInit {
   agences : Agence[] = [];
   agence = {} as Agence ;
 
+  registerForm!: FormGroup;
+  submitted = false;
+
   constructor(
     private http : HttpClient,
     private businessunitService: BusinessunitService,
     private agenceService: AgenceService,
+    private formBuilder: FormBuilder
   ) { }
 
   ngOnInit(): void {
     this.getBusinessunits();
     this.getAgences();
+    this.registerForm = this.formBuilder.group({
+      name: ['', Validators.required],
+      agenceId: ['',Validators.required]
+    });
   }
 
   getBusinessunits():void {
@@ -45,4 +54,21 @@ export class BusinessunitComponent implements OnInit {
       });
   }
 
+  onSubmit() {
+    this.submitted = true;
+
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.businessunit = this.registerForm.value
+    this.add(this.businessunit)
+  }
+
+  get f() { return this.registerForm.controls; }
+
+  onReset() {
+    this.submitted = false;
+    this.registerForm.reset();
+  }
+
 }