Insérer un objet avec une clé étrangère

**guillaume90** · 30/01/2021, 18h13

bonsoir la communauté.
cmnt vous vous portez ? bien j’espère.
j'ai encore un soucis avec Angular.
en faite je n'arrive pas inserer un objet avec clé etrangère pourtant mon web service fonctionne bien lorsque je le teste avec postman(je redige avec spring boot)

en image: Nom : Capture d’écran du 2021-01-30 17-51-07.png
Affichages : 1790
Taille : 179,8 Ko

Nom : Capture d’écran du 2021-01-30 17-51-07.png
Affichages : 1790
Taille : 179,8 Ko

mon objet s'ajoute bien en Bd avec sa catégorie et sa nature

mais lorque je fais le post depuis Angular ça me retourne une erreur

en image : Nom : Capture d’écran du 2021-01-30 18-11-03.png
Affichages : 1734
Taille : 189,3 Ko

Nom : Capture d’écran du 2021-01-30 18-11-03.png
Affichages : 1734
Taille : 189,3 Ko

et au niveau de la trace backend voila ce que ça m'affiche:
en image : Nom : Capture d’écran du 2021-01-30 17-57-47.png
Affichages : 1767
Taille : 335,2 Ko

voila mon code Angular:

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
export class AddProduitComponent implements OnInit {
  listNature :Nature[];
  listCategorie:Categorie[];
 
  constructor(public serviceProduit:ProduitService,@Inject(MAT_DIALOG_DATA) public data: any, public toastr:ToastrService,
  public route:Router,public matDialogRef:MatDialogRef<AddProduitComponent>, public form:FormBuilder,public serviceNature:NatureService,
  public serviceCat:CategorieService,private spinner: NgxSpinnerService) { }
 
  ngOnInit(): void {
    if(this.serviceProduit.choixOperation =="A")
    {this.inifForm()};
    this.serviceNature.getAllNature().subscribe(
      reponse=>{
        this.listNature=reponse;
      }
    );
    this.serviceCat.getAllCategorie().subscribe(
      reponse=>{
        this.listCategorie=reponse;
      }
    );
  }
  onSubmit(){
    if(this.serviceProduit.choixOperation =="A"){
      this.addProduit();
    }else{
      this.updateProduit();
    }
  }
  //nature:this.form.group({
    idNature:['']
 // });
  //categorie:this.form.group({});
  inifForm(){
    this.serviceProduit.dataForm=this.form.group({
    idPro:null,
	  nature:['',[Validators.required]],
	  categorie: ['',[Validators.required]],
	  numeroProd:['',[Validators.required,Validators.minLength(4)]],
	  designaton:['',[Validators.required,Validators.minLength(4)]],
	  prixAchat:['0',[Validators.required]],
    });
  }
  addProduit(){
    this.serviceProduit.createProduit(this.serviceProduit.dataForm.value).subscribe(
      data=>{
        console.log(data);
        this.toastr.success("le Produit a été Créee avec Succès");
        this.matDialogRef.close();
 
        this.serviceProduit.getAllProduit().subscribe(
          reponse=>{
            this.serviceProduit.listData=reponse;
            console.log(reponse);
          }
        );
        this.route.navigate['/produits'];
      }
    )
  }
  updateProduit(){
    this.serviceProduit.updateProduit(this.serviceProduit.dataForm.value.idPro,this.serviceProduit.dataForm.value).subscribe(
      data=>{
        this.toastr.show("le Produit a été Modifié avec Succès");
        this.matDialogRef.close();
 
        this.serviceProduit.getAllProduit().subscribe(
          reponse=>{
            this.serviceProduit.listData=reponse;
            console.log(reponse);
          }
        );
        this.route.navigate['/produits'];
      }
    )
  }
}

ma vue

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
<div class="row">
    <div class="col-md-12 col-md-offset-2">
        <h1>Produit</h1>
        <form [formGroup]="this.serviceProduit.dataForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
                <label>Nature</label>
                <select class="form-control" formControlName="nature" id="nature">
                    <option value="0">-Select-</option>
                    <option *ngFor="let item of listNature" value="{{item.idNature}}">{{item.libNature}}</option>
                </select>
            </div>
            <div class="form-group">
                <label>Categorie</label>
                <select class="form-control" formControlName="categorie" id="categorie">
                    <option value="0">-Select-</option>
                    <option *ngFor="let item of listCategorie" value="{{item.idCat}}">{{item.libCat}}</option>
                </select>
            </div>
            <div class="form-group">
                <label>code</label>
                <input type="text" class="form-control" formControlName="numeroProd" id="numeroProd">
            </div>
            <div class="form-group">
                <label>Désignation</label>
                <input type="text" class="form-control" formControlName="designaton" id="designaton">
            </div>
            <div class="form-group">
                <label>Prix Achat</label>
                <input type="text" class="form-control" formControlName="prixAchat" id="prixAchat">
            </div>
            <div>
                <button type="submit" class="btn btn-dark"><i class="fa fa-database"></i>Enregistrer</button>
                <button type="button" class="btn btn-outline ml-1"[mat-dialog-close]><i class="fa fa-close"></i>Fermer</button>
            </div>
 
        </form>
    </div>
</div>

comme le savez déjà, je suis encore nouveau sur Angular.
please I need your help

**krakatoa** · 30/01/2021, 19h25

bien le bonsoir l'ami,

sur postman tu utilsies le port : 8080
et sur angular le port: 4200

**guillaume90** · 30/01/2021, 19h38

Bsr je ne vois pas cmnt cette info peux m'aider

**krakatoa** · 30/01/2021, 19h51

j'ai pointé du doigt le problème , je pensais que tu allais comprendre le truc !

une url est constitué d'un nom de domaine et d'un port
sur internet, on ne précise pas le port car par défaut c'est toujours le : 8080

alors sur postman, tu envois ta demande sur le 8080
et sur Angular tu envois la demande sur le 4200

et bien, comment résoudre ?

tu va dans le code ou la requête POST est effectué et tu changes 4200 en 8080, non ?

**guillaume90** · 30/01/2021, 19h56

Mais Angular rédirige les URL vers le 8080 j'utilise le crossOrigin
Et j'enregistre sans pb les objets qui n'ont pas de clé étrangère

**krakatoa** · 30/01/2021, 21h45

c'est bien écrit 4200 ? et non 8080

Nom : 4200.jpg
Affichages : 1690
Taille : 74,6 Ko

et non Angular ne redirige pas vers 8080 sauf si on lui demande de le faire ...
et de toute façon on voit 4200 donc il ne le fait pas

je crois comprendre ce qu'il se passe.
à mon avis tu as écrit un code pour qu'il recupere l'url de l'application Angular et tu lui ajoute /add/product/.....

ce qui n'est pas bon, on écrit l'url d'une api en dure : htttp:///localhost:8080/add/product

tu peux me faire voir le code de la requete POST
et comment est formé la requete url

**guillaume90** · 31/01/2021, 16h51

Bonsoir l'ami désolé de n'avoir pas répondu plus tôt.
En fait comme je te le disais précédemment, je ne pense pas que se soit un problème avec les url puisque j'arrive à enregistrer en bd mes autres objets.
Je pense que le problème est au niveau des clés étrangères puis que lorsque je fais un @JsonIgnore coté backend(avec spring boot) mon objet est enregistré mais sans les valeurs des clés étrangères.

Et pour ce qui est des url de l'api, j'ai configuré un fichier proxy.conf.json

**dukoid** · 31/01/2021, 18h12

je ne suis pas sensé deviner qu'il y a un proxy ou je ne sais pas quoi

bon sinon alors c'est que le serveur reçoit la requete mais il ne la comprends pas.
comme je t'ai demandé plus haut, sans code on ne peux pas t'aider

**guillaume90** · 13/02/2021, 06h43

bjr la grande communauté
désolé pour l'inactivité j'étais unpeu souffrant

voila le code au niveau service :

Code :

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

1
2
3
   createProduit(formData:FormData):Observable<Object>{
    return this.httpClient.post('/api/produit/add',formData).pipe(catchError(this.handleError));
  }

le code de mon fichier add-produit.component.ts

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
addData(){
    const formData= new FormData();
    const produit=this.serviceProduit.dataForm.value;
    formData.append('produit',JSON.stringify(produit));
    formData.append('file',this.userFile);
    this.serviceProduit.createProduit(formData).subscribe(
      data=>{
        this.toastr.success("le Produit a été Créee avec Succès");
        this.matDialogRef.close();
        this.route.navigate(['/produits']);}
    );
  }

et mon 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
<div class="row">
    <div class="col-md-12 col-md-offset-2 scroll">
        <h1>Produit</h1>
        <form [formGroup]="this.serviceProduit.dataForm" (ngSubmit)="onSubmit()">
            <input type="hidden" class="form-control" formControlName="idPro" id="idPro">
            <div class="form-group">
                <label>Nature</label>
                <select class="form-control" formControlName="nature" id="nature">
                    <option value="0">-Select-</option>
                    <option *ngFor="let item of listNature" value="{{item.idNature}}">{{item.libNature}}</option>
                </select>
            </div>
            <div class="form-group">
                <label>Categorie</label>
                <select class="form-control" formControlName="categorie" id="categorie">
                    <option value="0">-Select-</option>
                    <option *ngFor="let item of listCategorie" value="{{item.idCat}}">{{item.libCat}}</option>
                </select>
            </div>
            <div class="form-group">
                <label>code</label>
                <input type="text" class="form-control" formControlName="numeroProd" id="numeroProd">
            </div>
            <div class="form-group">
                <label>Désignation</label>
                <input type="text" class="form-control" formControlName="designaton" id="designaton">
            </div>
            <div class="form-group">
                <label>Prix Achat</label>
                <input type="text" class="form-control" formControlName="prixAchat" id="prixAchat">
            </div>
            <div class="form-group">
                <label>Prix Vente</label>
                <input type="text" class="form-control" formControlName="prixVente" id="prixVente">
            </div>
            <div class="form-group">
                <label>Tva</label>
                <select class="form-control" formControlName="tva" id="tva">
                    <option value="0">-Select-</option>
                    <option value="19">19</option>
                    <option value="19.25">19.25</option>
                </select>
            </div>
            <div class="form-group">
                <label>Stock</label>
                <input type="text" class="form-control" formControlName="stock" id="stock">
            </div>
            <div class="form-group">
                <label>Image</label>
                <input type="file"  accept="image/*" (change)="onSelectFile($event)">
                <img [src]="imgURL" height="200" *ngIf="imgURL" alt="image indisponible">
            </div>
            <div>
                <button type="submit" class="btn btn-outline-dark"><i class="fa fa-database"></i>Enregistrer</button>
                <button type="button" class="btn btn-outline-dark ml-1"[mat-dialog-close]><i class="fa fa-close"></i>Fermer</button>
 
            </div>
 
        </form>
    </div>
</div>

mon reative form:

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
 
  inifForm(){
    this.serviceProduit.dataForm=this.form.group({
    idPro:null,
	  nature:['',[Validators.required]],
	  categorie: ['',[Validators.required]],
	  numeroProd:['',[Validators.required,Validators.minLength(4)]],
	  designaton:['',[Validators.required,Validators.minLength(4)]],
    prixAchat:['0',[Validators.required]],
	  prixVente:['0',[Validators.required,Validators.minLength(4)]],
	  tva:['0',[Validators.required,Validators.minLength(4)]],
    stock:['0',[Validators.required,Validators.minLength(4)]],
    fileName:['',[Validators.required]],
    });
  }

merci pour votre aide

**krakatoa** · 13/02/2021, 09h05

donne moi en texte le résultat que je teste puisse tester avec le json de mon coté :

Code :

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

1
2
3
4
 
...
this.httpClient.post('/api/produit/add',formData).subscribe((res: any) => console.log(JSON.stringify(res)));
...

**guillaume90** · 13/02/2021, 10h47

ça me retourne l'erreur suivante:

Type 'Subscription' is missing the following properties from type 'Observable<Object>': _isScalar, source, operator, lift, and 6 more.ts(2740)

**krakatoa** · 13/02/2021, 11h43

enlève le JSON.stringify !

Code :

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

1
2
 
formData.append('produit',JSON.stringify(produit));

**guillaume90** · 13/02/2021, 12h02

en enlevant

JSON.stringify

j'obtiens l'erreur en backend suivante:

WARN 11424 --- [nio-8080-exec-9] .m.m.a.ExceptionHandlerExceptionResolver : Resolved [com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of `com.infoTech.model.Produit` out of START_ARRAY token
at [Source: (String)"[object Object]"; line: 1, column: 1]]

**krakatoa** · 13/02/2021, 12h08

essaye ça tu devrais recevoir des données :

Code :

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

1
2
3
4
 
...
this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1').subscribe((res: any) => console.log(JSON.stringify(res)));
...

donc avec :

Code :

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

1
2
3
4
 
...
this.httpClient.post('/api/produit/add',formData).subscribe((res: any) => console.log(JSON.stringify(res)));
...

c'est ton backend qui pose problème !

**guillaume90** · 13/02/2021, 12h28

voila le format Json attendu par le serveur

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
 
{
         "nature":{
               "idNat":2
             },
	 "categorie":{
                    "idCat":1
                },
         "numeroProd":"uncode",
 
	 "designaton":"une désignation",
 
	 "prixAchat":1200,
 
	"fileName":"img.jpg",
 
	"prixVente":15000,
 
       "tva":19.25
 
 
}

mais voila ce que Angular renvoyé

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
 
{
         "nature":2,
 
	 "categorie":1,
 
         "numeroProd":"uncode",
 
	 "designaton":"une désignation",
 
	 "prixAchat":1200,
 
	"fileName":"img.jpg",
 
	"prixVente":15000,
 
       "tva":19.25
 
 
}

et donc le serveur ne reconnait pas la requete envoyé par Angular et me retour un Bad Request.
comme je le disais, lorsque je fais mes test avec postman , mon service web fonctionne bien

**krakatoa** · 13/02/2021, 13h31

bah la réponse est dans la description du problème, il faut que tu readapte au bon format les données , non ?

c'est normal le form te renvoi ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
 
produit =   {
         "nature":2,
	 "categorie":1,
         "numeroProd":"uncode",
	 "designaton":"une désignation",
	 "prixAchat":1200,
	"fileName":"img.jpg",
	"prixVente":15000,
       "tva":19.25
};

et donc, faut ré-adapter comme ça :

Code :

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

1
2
3
4
5
6
 
const produitTrans = { 
  ...produit,                                                        // copie le tableau produit dans produitTrans 
  nature: { idNat: produit.nature},                        // ré-ecrit la clé: nature
  categorie:  { idCat: produit.categorie}                // ré-ecrit la clé: categorie
};

Code :

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

1
2
3
4
 
...
formData.append('produit', JSON.stringify(produitTrans));
...

lorsque je fais mes test avec postman , mon service web fonctionne bien

je me demande comment ton serveur se débrouille avec postman
s'il attend le chemin suivant : nature.idNat et qu'à la place il y a : nature
à mon avis il ignore tout simplement : nature.idNat ne le trouvant pas au lieu de générer une erreur, très étrange !

pour ton back comme pour ton front, pour éviter ces erreurs il faut utiliser les modèles.
c'est le typage, cela permet d'être sûr que l'on manipule les données avec les bons formats !

**guillaume90** · 13/02/2021, 14h31

il étais effectivement question d'adapter le format de ma requete.

merci krakatoa pour ta précieuse aide et toute la communauté merci

Insérer un objet avec une clé étrangère

Angular

Discussions similaires

Partager

Partager