Discussion :

[angie13003]

Bonjour,

J'ai un problème au niveau de la récupération des valeurs de mon formulaire. Je viens de relire mon code plein de fois et je ne trouve pas où cela bug.
Lorsque je valide mon formulaire, les champs et les valeurs du formulaire ne correspondent pas.
Voici un exemple des données que je renseigne

usernamePartner: "createServer"
password: "test12345"
namePartner: "test create"
addressPartner: "64 Avenue de Montolivet, 13004 Marseille, France"
phonePartner: "0123456879"
mailPartner: "create@serve.com"
statusPartner: "Partenaire"
typePartner: "garage"
nameBilling: "create billing"
siretPartner: "000000000"
addressBilling: "61 boulevard bonnes graces, 13003 Marseille, france"
typeBilling: "par ses propores moeyns"
ctDuration: ""
maxCt: ""

Voici un exemple des données que je récupére

addressBilling: "create billing"
addressPartner: "64 Avenue de Montolivet, 13004 Marseille, France"
ctDuration: ""
idAgency: 1
idPartner: "partner"
mailPartner: "create@serve.com"
maxCt: ""
nameBilling: ""
namePartner: "test create"
password: "test12345"
phonePartner: "0123456879"
siretPartner: ""
statusPartner: "Partenaire"
typeBilling: "00000000000"
typePartner: "garage"
usernamePartner: "createServer"

Je ne comprend pas cette incohérence voici le code 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<div class="row mt-5 mb-5">
    <div class="col-12 text-center">
        <h2>Ajout d'un partenaire</h2>
    </div>
</div>
 
<div class="row">
    <form class="col-8 offset-2" [formGroup]="partnerForm" (ngSubmit)="onSubmitFormPartner()">
        <div class="row d-flex flex-column">
            <div class="input-field d-flex flex-row mb">
                <div class="input-field col-6">
                    <label for="usernamePartner">Identifiant de connexion</label>
                    <input required type="text" class="validate" id="usernamePartner" formControlName="usernamePartner">
                    <!-- <div class="messageError">
                  <sup>*</sup>Champ obligatoire
              </div> -->
                </div>
                <div class="input-field col-6">
                    <label for="password">Mot de passe</label>
                    <input required type="text" class="validate" id="password" formControlName="password">
                    <!-- <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="namePartner">Nom du partenaire</label>
                    <input required type="text" class="validate" id="namePartner" formControlName="namePartner">
                    <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
              </div> -->
                </div>
                <div class="input-field col-6">
                    <label for="addressPartner">Adresse du partenaire</label>
                    <input required type="text" class="validate" id="addressPartner" formControlName="addressPartner">
                    <!-- <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="phonePartner">Téléphone</label>
                    <input required type="text" class="validate" id="phonePartner" formControlName="phonePartner">
                    <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
                </div>
                <div class="input-field col-6">
                    <label for="mailPartner">E-mail</label>
                    <input required type="text" class="validate" id="mailPartner" formControlName="mailPartner">
                    <!-- <div class="messageError">
                <sup>*</sup>Champ obligatoire
            </div> -->
                </div>
            </div>
 
            <div class="input-field d-flex flex-row mb height">
                <div class="input-field col-6">
                    <label for="statusPartner">Status du partenaire</label>
                    <div class="d-flex mt-radio">
                        <p>
                            <input name="statusPartner" type="radio" value="Partenaire" class="validate" id="statusPartner" formControlName="statusPartner">
                            <label for="statusPartner">Partenaire</label>
                        </p>
                        <p>
                            <input name="statusPartner" type="radio" value="Non partenaire" class="validate" id="statusPartner" formControlName="statusPartner">
                            <label for="statusPartner">Non partenaire</label>
                        </p>
                    </div>
                    <!-- <div class="messageError">
              <sup>*</sup>Champ obligatoire
          </div> -->
                </div>
                <div class="input-field col-6">
                    <label for="typePartner">Type du partenaire</label>
                    <select class="validate" id="typePartner" formControlName="typePartner" required (change)="typeCT($event)">
            <option value="Selectionnez un type" disabled selected>Sélectionnez un type</option>
            <option value="garage" (change)="typeCT($event)">Garage</option>
            <option value="technicalControl" (change)="typeCT($event)">Contrôle technique</option>
          </select>
                    <!-- <div class="messageError">
              <sup>*</sup>Champ obligatoire
          </div> -->
                </div>
            </div>
 
            <div class="input-field d-flex flex-row mb" *ngIf="this.partnerForm.value.typePartner === 'technicalControl'">
                <div class=" input-field col-6 ">
                    <label for="ctDuration">Nombre d'heures nécéssaire pour la prestation</label>
                    <input type="text " class="validate " id="ctDuration" formControlName="ctDuration">
                    <!-- <div class="messageError ">
          <sup>*</sup>Champ obligatoire
        </div> -->
                </div>
                <div class=" input-field col-6 ">
                  <label for="maxCt">Nombre de voiture maximum par jour</label>
                  <input type="text " class="validate " id="maxCt" formControlName="maxCt">
                  <!-- <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="nameBilling">Nom de la facturation</label>
                    <input required type="text" class="validate" id="nameBilling" formControlName="nameBilling">
                    <!-- <div class="messageError ">
            <sup>*</sup>Champ obligatoire
          </div> -->
                </div>
                <div class="input-field col-6 ">
                    <label for="siretPartner">Numéro siret</label>
                    <input required type="text" class="validate" id="siretPartner" formControlName="siretPartner">
                    <!-- <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="addressBilling">Adresse pour la facturation</label>
                    <input required type="text" class="validate" id="addressBilling" formControlName="addressBilling">
                    <!-- <div class="messageError ">
            <sup>*</sup>Champ obligatoire
          </div> -->
                </div>
                <div class="input-field col-6">
                  <label for="typeBilling">Règlement de la facture client</label>
                  <div class="d-flex mt-radio">
                      <p>
                          <input name="typeBilling" type="radio" value="partner" class="validate" id="typeBilling" formControlName="typeBilling">
                          <label for="typeBilling">Par ses prorpes moyens</label>
                      </p>
                      <p>
                          <input name="typeBilling" type="radio" value="compteTier" class="validate" id="typeBilling" formControlName="typeBilling">
                          <label for="typeBilling">Via notre service de compte tier</label>
                      </p>
                  </div>
                  <!-- <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]="partnerForm.invalid">Ajouter un partenaire</button>
            </div>
        </div>
    </form>
</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
138
139
140
141
142
143
 
 /// <reference  types="@types/googlemaps"  />
import { Component, OnInit, NgZone } from '@angular/core';
import { PartnerService } from 'src/app/services/partner.service';
import { Partner } from 'src/app/models/partners.model';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Subscription } from 'rxjs';
import { Router } from '@angular/router';
 
@Component({
  selector: 'app-partner-forms',
  templateUrl: './partner-forms.component.html',
  styleUrls: ['./partner-forms.component.css']
})
export class PartnerFormsComponent implements OnInit {
 
  partnerForm: FormGroup;
  partners: Partner[];
  partnerSubscription: Subscription;
 
  addressPartner: string;
  addressBilling: string;
 
  constructor(private partnerService: PartnerService, private router: Router, private formBuilder: FormBuilder, private ngZone: NgZone) { }
 
  ngOnInit(): void {
    this.partnerSubscription = this.partnerService.partnerSubject.subscribe(
      (partners: Partner[]) => {
        this.partners = partners;
      }
    );
    this.partnerService.readListPartner();
    this.initFormPartner();
    this.getPlaceAutocomplete();
  }
 
  initFormPartner(): void {
    this.partnerForm = this.formBuilder.group(
      {
        usernamePartner: ['', Validators.required],
        password: ['', Validators.required],
        namePartner: ['', Validators.required],
        addressPartner: ['', Validators.required],
        phonePartner: ['', Validators.required],
        mailPartner: ['', Validators.required],
        statusPartner: ['', Validators.required],
        typePartner: ['', Validators.required],
        nameBilling: ['', Validators.required],
        siretPartner: ['', Validators.required],
        addressBilling: ['', Validators.required],
        typeBilling: ['', Validators.required],
        idAgency: '',
        idPartner: '',
        ctDuration: [''],
        maxCt: [''],
      }
    );
  }
 
  getPlaceAutocomplete() {
    let autocomplete = new google.maps.places.Autocomplete(document.getElementById('addressPartner') as HTMLInputElement);
    autocomplete.addListener("place_changed", () => {
      this.ngZone.run(() => {
        let place: google.maps.places.PlaceResult = autocomplete.getPlace();
        this.addressPartner = place.formatted_address
        this.partnerForm.patchValue({
          addressPartner : this.addressPartner,
        });
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      });
    });
    let autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('addressBilling') as HTMLInputElement);
    autocomplete2.addListener("place_changed", () => {
      this.ngZone.run(() => {
        let place: google.maps.places.PlaceResult = autocomplete2.getPlace();
        this.addressBilling = place.formatted_address
        this.partnerForm.patchValue({
          addressBilling : this.addressBilling,
        });
        if (place.geometry === undefined || place.geometry === null) {
          return;
        }
      });
    });
  }
 
  typeCT(e) {
    console.log(this.partnerForm.value.typePartner);
  }
 
  onSubmitFormPartner(): void {
    const formValue = this.partnerForm.value;
    const newPartner = new Partner(
      formValue['usernamePartner'],
      formValue['password'],
      formValue['namePartner'],
      formValue['addressPartner'],
      formValue['phonePartner'],
      formValue['mailPartner'],
      formValue['statusPartner'],
      formValue['typePartner'],
      formValue['ctDuration'],
      formValue['maxCt'],
      formValue['nameBilling'],
      formValue['siretPartner'],
      formValue['addressBilling'],
      formValue['typeBilling'],
      formValue['ctDuration'],
      formValue['maxCt'],
    );
    newPartner.idAgency = 1;
    this.partnerService.addPartner(newPartner);
    console.log('récupération des données pour envoie au back',newPartner);
    this.router.navigate(['/partner']);
    this.rebuildFormPartner();
  }
 
  rebuildFormPartner(): void {
    this.partnerForm.reset(
      {
        usernamePartner: '',
        password: '',
        namePartner: '',
        addressPartner: '',
        phonePartner: '',
        mailPartner: '',
        statusPartner: '',
        typePartner: '',
        nameBilling: '',
        siretPartner: '',
        addressBilling: '',
        typeBilling: '',
        idAgency: '',
        idPartner: '',
        ctDuration: '',
        maxCt: ''
      }
    );
  }
 
}

service

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
 
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { HttpClient } from '@angular/common/http';
import { Partner } from 'src/app/models/partners.model';
 
@Injectable({
  providedIn: 'root'
})
export class PartnerService {
 
  partnerSubject = new Subject<any[]>();
  baseUrl = '../backend/api/partner';
  private partners: Partner [];
 
  constructor(private httpClient: HttpClient) { }
 
  emitPartnerSubject(){
    this.partnerSubject.next(this.partners);
  }
 
  readListPartner() {
    console.log('adresse fichier back liste partner', `${this.baseUrl}/listPartner.php`);
    return this.httpClient.get<Partner[]>(`${this.baseUrl}/listPartner.php`).subscribe(
      (partners) => {
        this.partners = partners;
        this.emitPartnerSubject();
      }
    );
  }
 
  addPartner(partner: Partner) {
    this.httpClient.post(`${this.baseUrl}/editPartner.php`, partner).subscribe(
      ()=> {
        this.partners.push(partner);
        console.log('address fichier back pour envoie des données', `${this.baseUrl}/editPartner.php`);
        console.log('envoie des deonnées au back', partner);
        console.log('enregistrement partner réussit');
      },
      (error) => {
        console.log('erreur de sauvegarde partner' + error);
      }
    );
  }
 
  getPartnerById(idPartner) {
    return this.httpClient.get(`${this.baseUrl}/listPartner.php?idPartner=${idPartner}`);
  }
 
  getUpdateById() {
    return this.httpClient.get<Partner[]>(`${this.baseUrl}/listPartner.php?idPartner=3`).subscribe(
      (partners) => {
        this.partners = partners;
      }
    );
  }
 
 
  updatePartner(partner: Partner) {
    return this.httpClient.post(`${this.baseUrl}/editPartner.php`, partner).subscribe(
      () => {
        console.log('addresse fichier back envoie de données', `${this.baseUrl}/editPartner.php`);
        console.log('envoie des données au back', partner);
        console.log('enregistrement ok');
      },
      (error) => {
        console.log('erreur de sauvegarde' + error);
      }
    );
  }
 
  deletePartner(partner) {
    return this.httpClient.post(`${this.baseUrl}/updateStatus.php`, partner).subscribe(
      () => {
        console.log('address envoie fichier back updateStatus', `${this.baseUrl}/updateStatus.php`);
        console.log('envoie des données au back', partner);
        console.log('partner supprimé');
        this.emitPartnerSubject();
      },
      (error) => {
        console.log('address envoie fichier back updateStatus', `${this.baseUrl}/updateStatus.php`);
        console.log('envoie des données au back', partner);
        console.log('partner non supprimé' + error);
      }
    );
  }
 
  updateStatusPartner(partner) {
    return this.httpClient.post(`${this.baseUrl}/updateStatus.php`, partner).subscribe(
      () => {
        console.log('address envoie fichier back updateStatus', `${this.baseUrl}/updateStatus.php`);
        console.log('envoie des données au back', partner);
        console.log('enregistrement ok');
      },
      (error) => {
        console.log('address envoie fichier back updateStatus', `${this.baseUrl}/updateStatus.php`);
        console.log('envoie des données au back', partner);
        console.log('erreur de sauvegarde' + error);
      }
    );
  }
 
  updateStatusNoPartner(partner) {
    return this.httpClient.post(`${this.baseUrl}/updateStatus.php`, partner).subscribe(
      () => {
        console.log('address envoie fichier back updateStatus', `${this.baseUrl}/updateStatus.php`);
        console.log('envoie des données au back', partner);
        console.log('enregistrement ok');
      },
      (error) => {
        console.log('address envoie fichier back updateStatus', `${this.baseUrl}/updateStatus.php`);
        console.log('envoie des données au back', partner);
        console.log('erreur de sauvegarde' + error);
      }
    );
  }
}

model

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
 
export class Partner {
 
  constructor(
    public usernamePartner?: string,
    public password?: string,
    public namePartner?: string,
    public addressPartner?: string,
    public phonePartner?: string,
    public mailPartner?: string,
    public statusPartner?: string,
    public typePartner?: string,
    public nameBilling?: string,
    public siretPartner?: string,
    public addressBilling?: string,
    public typeBilling?: string,
    public idAgency?: number,
    public idPartner?: number,
    public ctDuration?: number,
    public maxCt?: number
    ) {}
}

[krakatoa]

quel champs ne correspond pas ?
faut nous dire un peu plus

[angie13003]

les champs
le champ addressBilling récupère la valeur de nameBilling
le champ nameBilling récupère rien
le champ siretPartner récupère rien
le champ typeBilling récupère la valeur de siretPartner
le champ idPartner récupère la valeur de typeBilling alors que je n'envoie pas cette variable dans mon code onSubmit

[krakatoa]

l'ordre n'est pas le même !
le décalage commence la la ligne 10

étant donné que tu utlises un tableau sans clé, l'ordre est important

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
const newPartner = new Partner(
      formValue['usernamePartner'],
      formValue['password'],
      formValue['namePartner'],
      formValue['addressPartner'],
      formValue['phonePartner'],
      formValue['mailPartner'],
      formValue['statusPartner'],
      formValue['typePartner'],
      formValue['ctDuration'],
      formValue['maxCt'],
      formValue['nameBilling'],
      formValue['siretPartner'],
      formValue['addressBilling'],
      formValue['typeBilling'],
      formValue['ctDuration'],
      formValue['maxCt'],
    );[/B]

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
constructor(
    public usernamePartner?: string,
    public password?: string,
    public namePartner?: string,
    public addressPartner?: string,
    public phonePartner?: string,
    public mailPartner?: string,
    public statusPartner?: string,
    public typePartner?: string,
    public nameBilling?: string,
    public siretPartner?: string,
    public addressBilling?: string,
    public typeBilling?: string,
    public idAgency?: number,
    public idPartner?: number,
    public ctDuration?: number,
    public maxCt?: number
    ) {}
}

[angie13003]

ah mince je ne savais pas que l'ordre était important. Super je vais regarder cela car j'ai plusieurs formulaire avec le même problème.

[krakatoa]

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
 
export interface  IPartner {
 
    usernamePartner?: string;
    password?: string;
    namePartner?: string;
    addressPartner?: string;
    phonePartner?: string;
    mailPartner?: string;
    statusPartner?: string;
    typePartner?: string;
    nameBilling?: string;
    siretPartner?: string;
    addressBilling?: string;
    typeBilling?: string;
    idAgency?: number;
    idPartner?: number;
    ctDuration?: number;
    maxCt?: number;
}

Code :

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

1
2
3
4
 
 onSubmitFormPartner(): void {
    const newPartner = this.partnerForm.value as IPartner;                 // en 1 ligne, le contenu du formulaire est convertie en un modèle !
                                                                                                     // et peu importe l'ordre (vu qu'il y a les couples :  clé -> valeur )

[angie13003]

ok je vais tester cette méthode sur mes nouveaux formulaires.

Merci beaucoup