Fix des champs non modifies non reconnus pour les Agences

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

@@ -4,7 +4,10 @@
   <h2>{{agence.name | uppercase}} </h2>
   <div><span>id : </span>{{agence.id}}</div>
 
-  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" >
+  <form
+    *ngIf="agenceObservable | async;"
+    [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>

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

@@ -6,6 +6,8 @@ import {Location} from "@angular/common";
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {Businessunit} from "../../../interfaces/businessunit";
 import {BusinessunitService} from "../../../services/businessunit.service";
+import {Observable} from "rxjs";
+import {take, tap} from "rxjs/operators";
 
 @Component({
   selector: 'app-agence-edit',
@@ -14,9 +16,12 @@ import {BusinessunitService} from "../../../services/businessunit.service";
 })
 export class AgenceEditComponent implements OnInit {
   agence = {} as Agence;
+  agenceObservable!:Observable<Agence>;
   businessUnits : Businessunit[] = [];
   businessUnit = {} as Businessunit ;
 
+  id: number;
+
   registerForm!: FormGroup;
   submitted = false;
 
@@ -26,43 +31,40 @@ export class AgenceEditComponent implements OnInit {
     private businessUnitService: BusinessunitService,
     private location: Location,
     private formBuilder: FormBuilder
-  ) { }
+  ) {
+    this.id = Number(this.route.snapshot.paramMap.get('id'))
+  }
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this.getBusinessUnits()
-    this.getAgence()
     this.registerForm = this.formBuilder.group({
       name: ['', Validators.required],
       businessUnitId:['',Validators.required]
     });
+    this.agenceObservable = this.agenceService.getAgence(this.id).pipe(tap(agence => this.registerForm.patchValue(agence)))
+    this.agence = await this.agenceObservable.pipe(take(1)).toPromise()
   }
 
-  getAgence(): void {
-    const id = Number(this.route.snapshot.paramMap.get('id'))
-    this.agenceService.getAgence(id)
-      .subscribe(agence => this.agence = agence);
+  getBusinessUnits() {
+    this.businessUnitService.getBusinessunits()
+      .subscribe(businessunits => this.businessUnits = businessunits);
   }
 
   goBack(): void {
     this.location.back();
   }
 
-  save():void{
-    if (this.agence){
-      this.agenceService.updateAgence(this.agence)
-        .subscribe(()=>this.goBack());
-    }
-  }
-
-
-  onSubmit() {
-    this.submitted = true;
-
+  onSubmit():void{
+    this.submitted = true
     if (this.registerForm.invalid) {
       return;
     }
+    if (this.agence){
     this.agence.name = this.registerForm.value.name
-    this.save()
+    this.agence.businessUnitId = this.registerForm.value.businessUnitId
+      this.agenceService.updateAgence(this.agence)
+        .subscribe(()=>this.goBack());
+    }
   }
 
   get f() { return this.registerForm.controls; }
@@ -71,9 +73,5 @@ export class AgenceEditComponent implements OnInit {
     this.submitted = false;
     this.registerForm.reset();
   }
-  getBusinessUnits():void {
-    this.businessUnitService.getBusinessunits()
-      .subscribe(businessunits => this.businessUnits = businessunits);
-  }
 
 }