Discussion :

[angie13003]

Bonjour,

Lors de la mise sur serveur, le pré-remplissage de mon formulaire de modification ne fonctionne plus.
Je souhaite récupéré les valeurs correspondants au input pour faire juste une modificaiton si nécessaire des éléments.

html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<div class="row mt-5 mb-5 pt">
  <div class="text-center col-9">
      <h2>Fiche du client {{ firstNameCustomer }}</h2>
  </div>
  <div class="text-right col-3">
      <button style="font-size: 12px;" class="btn-danger" routerLink="/customer">Retour à la liste</button>
  </div>
</div>
 
<div class="row mb-4">
  <div class="col-6 m-auto text-center">
    <a style="font-size: 12px;" class="btn-danger"(click)="onUpdate()">Modifier</a>
  </div>
  <div class="col-6 m-auto text-center">
    <a style="font-size: 12px;" class="btn-danger" (click)="deleteCustomer()">Supprimer</a>
  </div>
</div>
 
<div class="row pb">
  <div class="col-6 colInfoLeft flex-column" [style.display]="this.noUpdate">
      <h3 class="text-center">Information</h3>
      <div class="row">
          <div class="col-12">
              <div class="m-auto">
                  <p class="m-auto p-2 info"><span>Nom : </span>{{ firstNameCustomer }}</p>
              </div>
              <div class="m-auto">
                  <p class="m-auto p-2 info"><span>Prénom : </span>{{ lastNameCustomer }}</p>
              </div>
              <div class="m-auto">
                  <p class="m-auto p-2 info"><span>Téléphone : </span> {{ phoneCustomer }}</p>
              </div>
              <div class="m-auto">
                  <p class="m-auto p-2 info"><span>E-Mail : </span> {{ mailCustomer }}</p>
              </div>
              <div class="m-auto">
                <p class="m-auto p-2 info"><span>Adresse de facturation : </span> {{ addressBillingCustomer }}</p>
            </div>
              <div class="m-auto">
                  <p class="m-auto p-2 info"><span>Date de naissance : </span> {{ dateOfBirthdayCustomer }}</p>
              </div>
              <div class="m-auto">
                  <p class="m-auto p-2 info"><span>Date de création : </span> {{ dateCustomer }}</p>
              </div>
          </div>
      </div>
  </div>
  <form class="col-6 colInfoLeft flex-column" [style.display]="this.update" [formGroup]="updateCustomer" (ngSubmit)="onSubmitFormCustomer()">
    <h3 class="text-center">Modification</h3>
    <div class="row d-flex flex-column">
      <div class="input-field d-flex flex-row mb">
        <div class="input-field col-6">
          <label for="firstNameCustomer">Nom</label>
          <input required type="text" class="validate" id="firstNameCustomer" formControlName="firstNameCustomer">
          <!-- <div class="messageError">
          <sup>*</sup>Champ obligatoire
          </div> -->
        </div>
        <div class="input-field col-6">
          <label for="lastNameCustomer">Prénom</label>
          <input required type="text" class="validate" id="lastNameCustomer" formControlName="lastNameCustomer">
          <!-- <div class="messageError">
          <sup>*</sup>Champ obligatoire
          </div> -->
        </div>
      </div>
      <div class="input-field d-flex flex-row mb">
        <div class="input-field col-6">
          <label for="phoneCustomer">Téléphone</label>
          <input required type="text" class="validate" id="phoneCustomer" formControlName="phoneCustomer">
          <!-- <div class="messageError">
          <sup>*</sup>Champ obligatoire
          </div> -->
        </div>
        <div class="input-field col-6">
          <label for="mailCustomer">E-mail</label>
          <input required type="text" class="validate" id="mailCustomer" formControlName="mailCustomer">
          <!-- <div class="messageError">
          <sup>*</sup>Champ obligatoire
          </div> -->
        </div>
      </div>
      <div class="input-field d-flex flex-row mb">
        <div class="input-field col-6">
          <label for="addressBillingCustomer">Adresse de facturation</label>
          <input required type="text" class="validate" id="addressBillingCustomer" formControlName="addressBillingCustomer">
          <!-- <div class="messageError">
          <sup>*</sup>Champ obligatoire
          </div> -->
        </div>
        <div class="input-field col-6">
          <label for="dateOfBirthdayCustomer">Date de naissance</label>
          <input required type="date" class="validate" id="dateOfBirthdayCustomer" formControlName="dateOfBirthdayCustomer">
          <!-- <div class="messageError">
          <sup>*</sup>Champ obligatoire
          </div> -->
        </div>
      </div>
      <div class="mt-5 mb-5 text-center ">
        <button class="m-auto" id="btn" type="submit" [disabled]="updateCustomer.invalid">Valider</button>
    </div>
    </div>
</form>
  <div class="col-6 colInfoRight">
      <h3 class="text-center">Historique de réservation</h3>
      <div class="row d-flex flex-row borderBottom" *ngFor="let booking of bookings">
        <div class="col-12">
          <div class="row">
            <div class="col-6">
              <p class="text-center p-2 info" *ngIf="booking.dateForth != null"><span>Date de prise en charge: </span> <br>{{ booking.dateForth }}</p>
            </div>
            <div class="col-6">
              <p class="text-center p-2 info" *ngIf="booking.hoursForth != null"><span>Heure de prise en charge : </span> <br>{{ booking.hoursForth }}</p>
            </div>
          </div>
          <div class="row">
            <div class="col-6">
              <p class="text-center p-2 info" *ngIf="booking.dateBack != null"><span>Date de restitution: </span> <br>{{ booking.dateBack }}</p>
            </div>
            <div class="col-6">
              <p class="text-center p-2 info" *ngIf="booking.hoursBack != null"><span>Heure de restitution : </span> <br>{{ booking.hoursBack }}</p>
            </div>
          </div>
      </div>
    </div>
    <div class="row mt-5">
      <pagination-controls class="hide-page-numbers m-auto text-center" (pageChange)="p = $event" previousLabel="prec" nextLabel="suiv"></pagination-controls>
  </div>
  </div>
</div>

component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 /// <reference  types="@types/googlemaps"  />
import { Component, OnInit, NgZone } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CustomerService } from 'src/app/services/customer.service';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';
import { BookingService } from 'src/app/services/booking.service';
import { Booking } from 'src/app/models/bookings.model';
import { Subscription } from 'rxjs';
 
 
@Component({
  selector: 'app-single-customer',
  templateUrl: './single-customer.component.html',
  styleUrls: ['./single-customer.component.css']
})
export class SingleCustomerComponent implements OnInit {
 
  bookings: any;
  bookingSubscription: Subscription;
 
  currentCustomer = null;
  firstNameCustomer: string;
  lastNameCustomer: string;
  mailCustomer: string;
  phoneCustomer: string;
  dateOfBirthdayCustomer: string;
  dateCustomer: string;
  addressBillingCustomer: string;
  idCustomer: number;
 
  noUpdate: string;
  update: string;
  updateCustomer: FormGroup;
  pickupLoc: string;
  p: number = 1;
 
  constructor(private customerService: CustomerService, private route: ActivatedRoute, private router: Router, private formBuilder: FormBuilder, private ngZone: NgZone, private bookingService: BookingService) { }
 
  ngOnInit(): void {
    this.bookingSubscription = this.bookingService.bookingByIdCustomerSubject.subscribe(
      (bookings: Booking[]) => {
        this.bookings = bookings;
        console.log('lecture de donnée historique de réservation client sélectionné', this.bookings);
      }
    );
    this.bookingService.getBookingByIdCustomer(this.idCustomer);
    this.getCustomer(this.route.snapshot.paramMap.get('idCustomer'));
    this.noUpdate = 'flex';
    this.update = 'none';
    this.initUpdateCustomer();
    this.getPlaceAutocomplete();
  }
 
  getCustomer(idCustomer) {
    this.customerService.getCustomerById(idCustomer).subscribe(
      customer => {
        this.currentCustomer = customer;
        console.log('lecture de donnée détail client sélectionné', this.currentCustomer);
        this.idCustomer = this.currentCustomer.idCustomer;
        this.firstNameCustomer = this.currentCustomer.firstNameCustomer;
        this.lastNameCustomer = this.currentCustomer.lastNameCustomer;
        this.mailCustomer = this.currentCustomer.mailCustomer;
        this.phoneCustomer = this.currentCustomer.phoneCustomer;
        this.dateOfBirthdayCustomer = this.currentCustomer.dateOfBirthdayCustomer;
        this.dateCustomer = this.currentCustomer.dateCustomer;
        this.addressBillingCustomer = this.currentCustomer.addressBillingCustomer;
      }
    )
  }
 
  deleteCustomer(){
    const onDelete = {
      idCustomer : this.idCustomer
    };
    console.log(onDelete);
    this.customerService.deleteCustomer(onDelete);
    this.router.navigate(['/customer']);
  }
 
  onUpdate() {
    this.noUpdate = 'none';
    this.update = 'flex';
  }
 
  initUpdateCustomer() {
    this.updateCustomer = this.formBuilder.group(
      {
        firstNameCustomer: [''],
        lastNameCustomer: [''],
        phoneCustomer: [''],
        mailCustomer: [''],
        addressBillingCustomer: [''],
        dateOfBirthdayCustomer: ['']
      }
    );
    this.updateCustomer.controls['firstNameCustomer'].setValue(this.firstNameCustomer);
    this.updateCustomer.controls['lastNameCustomer'].setValue(this.lastNameCustomer);
    this.updateCustomer.controls['phoneCustomer'].setValue(this.phoneCustomer);
    this.updateCustomer.controls['mailCustomer'].setValue(this.mailCustomer);
    this.updateCustomer.controls['addressBillingCustomer'].setValue(this.addressBillingCustomer);
    this.updateCustomer.controls['dateOfBirthdayCustomer'].setValue(this.dateOfBirthdayCustomer);
  }
 
  getPlaceAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('addressBillingCustomer') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        this.pickupLoc = place.formatted_address
        this.updateCustomer.patchValue({
          addressBillingCustomer : this.pickupLoc,
        });
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      });
    });
  }
 
  onSubmitFormCustomer() {
    const formValue = this.updateCustomer.value;
    const updateCustomer = {
      idCustomer: this.idCustomer,
      firstNameCustomer: formValue['firstNameCustomer'],
      lastNameCustomer: formValue['lastNameCustomer'],
      phoneCustomer: formValue['phoneCustomer'],
      mailCustomer: formValue['mailCustomer'],
      addressBillingCustomer: formValue['addressBillingCustomer'],
      dateOfBirthdayCustomer: formValue['dateOfBirthdayCustomer']
    };
    console.log(updateCustomer);
    this.customerService.updateCustomer(updateCustomer);
    this.router.navigate(['/customer']);
  }
 
}

Je sais que normalement c'est ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 this.updateCustomer.controls['lastNameCustomer'].setValue(this.lastNameCustomer);

qui gère cela mais là ca ne fonctionne pas sur le serveur.

[krakatoa]

essaye avec get :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
console.log(this.firstNameCustomer);
 
    this.updateCustomer.get('firstNameCustomer').setValue(this.firstNameCustomer);

[angie13003]

effectivement il ne récupère pas ma donnée firstNameCustomer car le console.log est undefined

Pourtant lors de la fiche détail il me récupère bien la valeur de fistNameCustomer mais pas lorsque que je clique sur modifier.

je pense du coup que je ne dois pas appeler ma fonction update au bon moment je vais chercher

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
    this.bookingService.getBookingByIdCustomer(this.idCustomer);
    this.getCustomer(this.route.snapshot.paramMap.get('idCustomer'));           // ATTENTION :   ici, c'est  de l'asynchrone
                                                                                                                 // il va mettre quelques ms pour recuperer les données
    this.noUpdate = 'flex';                                                                             //  mais l'execution du code continu, il n'attends pas la recuperation de
    this.update = 'none';
    this.initUpdateCustomer();                                                                      // donc   ici,   les données sont vide  (qqs ms plus tard ils contiendront le résultat)  mais trop tard l'execution a continué
    this.getPlaceAutocomplete();

[angie13003]

j'ai trouvé la solution merci au top