databinding sur un SELECT

Bonjour,
Je travaille sur une petite application angular.
Je souhaite éditer des données affichées dans une table, dans un formulaire qui comporte un menu déroulant (Quand j'ouvre mon menu déroulant j'ai bien les différentes valeurs disponibles).
Quand je sélectionne une ligne, les champs sont bien remplis sauf pour le select qui reste vide.

Pourtant, en regardant la console de développement du navigateur, je vois bien que mon objet et il semble correct.

J'ajoute un project stackblitz pour illustrer mon problème : https://stackblitz.com/edit/angular-...component.html

Code:

---

1 2 3

category: {id: 1, title: "test"} id: 1 title: "test"

---

voici le code de mon controller angular

Code:

---

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

@Component({ selector: 'app-event', templateUrl: './event.component.html', styleUrls: ['./event.component.css'] }) export class EventComponent implements OnInit {   subscriptionForm; subscriptions; categories; displayedColumns: string[] = ['title', 'Edit'];   constructor(private subscriptionSVC: SubscriptionService, private subscriptionCategoriesSVC: SubscriptionCategoriesService, private formBuilderSVC: FormBuilder) { this.subscriptionForm = this.formBuilderSVC.group({ id: 0, title: [''], category: [''], }); }   ngOnInit() { this.subscriptionSVC.GetAll().subscribe(s => this.subscriptions = s ); this.subscriptionCategoriesSVC.GetAll().subscribe(c => this.categories = c ); }   SelectEditSubscriptions($event, sub) { event.preventDefault(); this.subscriptionForm.setValue(sub); }   }

---

Et voici le code html

Code:

---

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

<mat-card>   <mat-card-content> <table mat-table [dataSource]="subscriptions" class="mat-elevation-z8">   <mat-text-column name="title"></mat-text-column>   <ng-container matColumnDef="Title"> <th mat-header-cell *matHeaderCellDef> Title </th> <td mat-cell *matCellDef="let element"> {{element.title}} </td> </ng-container>   <ng-container matColumnDef="Edit"> <th mat-header-cell *matHeaderCellDef> Edit </th> <td mat-cell *matCellDef="let element"> <a href="#" (click)="SelectEditSubscriptions($event, element)" aria-hidden="false" aria-label="icon"><mat-icon>edit</mat-icon></a> </td> </ng-container>     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>   </table> </mat-card-content> </mat-card>       <mat-card>   <mat-card-content> <form [formGroup]="subscriptionForm">   <div> <mat-form-field> <input matInput id="ID" type="Number" formControlName="id" /> </mat-form-field> </div>   <div> <mat-form-field> <input matInput id="Title" type="text" formControlName="title"> </mat-form-field> </div>     <div> <mat-form-field> <mat-select formControlName="category"> <mat-option *ngFor="let cat of categories" [value]="cat">{{cat.title}}</mat-option> </mat-select> </mat-form-field> </div>   </form> </mat-card-content> </mat-card>

---

Merci pour vos éclairages parce que je ne comprends pas pourquoi le binding du menu déroulant ne fonctionne pas...

==> cat.title

Code:

---

1 2	<mat-option *ngFor="let cat of allCategories" [value]="cat.title">

---

Merci pour ta réponse, mais ça ne résoud pas le souci. :(
J'avais bien essayé déjà.
En testant dans le stackblitz, je te confirme que la valeur n'est pas "bindée"
https://stackblitz.com/edit/angular-...component.html

normal
regarde ce que donne ton : console.log(this.allData[0]);
tu ne vois pas un truc incohérent ?

Code:

---

1 2	this.myformGroup.controls['title'].setValue(this.allData[0].title); this.myformGroup.controls['category'].setValue(this.allData[0].????????????? et ici ??? devine ????);

---

D'après ce que tu écris, je comprends que je dois attribuer les valeurs champs par champs.
Hors, sauf erreur de ma part, je pense qu'il est possible de passer l'objet en entier.
Par exemple la méthode ci-dessous fonctionne (je l'ai rajouté dans le stackblitz: https://stackblitz.com/edit/angular-...m.component.ts)

Code:

---

1 2 3 4 5 6 7 8 9

bindManual() { const input = { title: "manual binding", category: this.allCategories[0] };   console.log(input); this.myformGroup.setValue(input); }

---

le console log m'affiche un objet similaire.

Du coup, je ne comprends pas la différence entre les deux méthodes et pourquoi l'une fonctionne et pas l'autre...

on peut setter tout un formulaire en entier
à condition que la structure du formulaire soit identique à la structure du json que l'on set, c'est logique !

json

Code:

---

1 2 3 4 5

0: Object category: Object id: 1 title: "category 1" title: "title 1"

---

ton formulaire

Code:

---

1 2 3 4 5 6

myformGroup = this.formBuilder.group({ title: [""], category: [""] });

---

tu vois bien qu'il y a un problème ?


comme ils ne sont pas identique alors on set champs par champs
à moins de modifier la structure du form pour qu'il corresponde à celui du json.... ou inversement

Code:

---

1 2 3 4 5 6

<mat-option *ngFor="let cat of allCategories" [value]="cat.title">   .... .... this.myformGroup.controls['title'].setValue(this.allData[0].title); this.myformGroup.controls['category'].setValue(this.allData[0].category.title);

---

désolé, mais je ne comprends pas vraiment où est le souci.
Je passe un objet à mon champ select et justement j'affiche la propriété title via {{ cat.title }}

d'ailleurs en faisant en procédant comme ci-dessous ça fonctionne

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

const input = { title: "manual binding", category: this.allCategories[0] }; console.log(input); this.myformGroup.setValue(input);   // output of console.log(input); //category: CategoryModel // id: 1 // title: "category 1" // __proto__: CategoryModel //title: "manual binding"

---

Alors que ceci (cf ci-dessous) ne fonctionne pas et je ne vois pas la différence. Le console.log m'affiche la même structure d'objet. Seul le type diffère.

Code:

---

1 2 3 4 5 6 7 8 9 10

console.log(this.allData[0]); this.myformGroup.setValue(this.allData[0]);   //output of console.log(this.allData[0]); //category: Object // id: 1 // title: "category 1" // __proto__: Object //title: "title 1"

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

entre: category: id: 1 title: "category 1" title: "title 1" et title: [""], category: [""]

---

vraiment tu ne vois pas ? :calim2::calim2:
sans te manquer de respect, tu as un soucis de vue peut etre ? :mouarf:

Citation:

---

sans te manquer de respect, tu as un soucis de vue peut etre ?

---

C'est possible. Je viens justement là pour me faire aider par le regard aiguisé des autres.8O
Mais j'ai aussi tendance à penser qu'il faut être deux pour ne pas se comprendre ;)

Mais je fais des efforts. De ce que je comprends de ton dernier post, tu sembles donc pointer sur la façon dont je construis le formulaire.
Du coup, j'ai donc essayé ça

Code:

---

1 2 3 4

myformGroup = this.formBuilder.group({ title: [""], category: [{id:0, title:""}] });

---

et

Code:

---

1 2 3 4

myformGroup = this.formBuilder.group({ title: [""], category: this.formBuilder.group({ id: [], title: [] }) });

---

mais ça ne marche pas. Donc, il y a encore un truc qui m'échappe...


Reste toujours la question qui me turlupine, c'est pourquoi ça marche quand je fais

Code:

---

1 2 3 4 5

const input = { title: "manual binding", category: this.allCategories[0] }; this.myformGroup.setValue(input);

---

Pourtant là aussi je passe bien un objet ayant les mêmes propriétés

Je remets le lien vers le stackblitz pour ceux qui veulent tester https://stackblitz.com/edit/angular-...m.component.ts

pour info:

Code:

---

1 2 3 4

console.log(this.allCategories[0]);   id: 1 title: "category 1"

---

donc comme dans ton exemple, ce que tu as fait fonctionne, ce qui est normal

Code:

---

1 2 3 4 5 6

const input = { title: "manual binding", category: this.allCategories[0] };   this.myformGroup.setValue(input);

---

pourquoi ?

la structure du formulaire est

Code:

---

1 2	title: string; category: string

---

en faisant ça:

Code:

---

1 2 3 4

const input = { title: "manual binding", category: this.allCategories[0] };

---

c'est comme si tu faisais ça:

Code:

---

1 2 3 4

const input = { title: "manual binding", category: '{ "id": 1, "title": "category 1" }' };

---

et donc dans la vue:

Code:

---

1 2 3

<mat-option *ngFor="let cat of allCategories" [value]="cat"> {{ cat.title }} </mat-option>

---

donne

Code:

---

1 2	<option value="'{ "id": 1, "title": "category 1" }">category 1</option> <option value="'{ "id": 2, "title": "category 2" }">category 2</option>

---

et donc ça fonctionne !

car du formulaire -> category: '{ "id": 1, "title": "category 1" }' EST EGAL à value de --> <option value="'{ "id": 1, "title": "category 1" }">category 1</option>.


MAIS c'est très moche
en réalité, la bonne pratique est que value doit contenir l'id donc : "1" et non '{ "id": 1, "title": "category 1" }'

dans un objet l'id est l'identifiant unique, il ne change jamais. on peut modifier le texte, peu importe mais l'id non !

Code:

---

1 2 3 4 5 6 7 8

<mat-option *ngFor="let cat of allCategories" [value]="cat.id"> {{ cat.title }} </mat-option>   .... .... this.myformGroup.controls['title'].setValue(this.allData[0].title); this.myformGroup.controls['category'].setValue(this.allData[0].category.id);

---

Code:

---

1 2	console.log(this.myformGroup.value); {title: "manual binding", category: "1"}

---

***
entre:

(1)
category:
__ id: 1
__ title: "category 1"
title: "title 1"

et

(2)
title: "title 1"
category: "category 1"


version simplifié, en enlevant les valeurs et donc en ne gardant que la structure, tu vois bien que :
(1)
title
category.title

(2)
title
category


entre (1) et (2) tu vois bien que dans le cas (1) pour category , title est de trop, non ?
donc ce que je disais c'est que tu ne peux pas setter un formulaire avec des données qui ont une structure différente
voilà pourquoi à l'origine ton set ne fonctionnait pas

Merci dukoid pour ta réponse.
Je comprends le souci désormais et effectivement avec tes explications j'ai pu faire fonctionner mon exemple.

J'ai encore deux interrogations :
1- Après, si j'ai pris cette structure imbriquée c'est parce que c'est ce que je reçois de mon api.
Le code de mon exemple est volontairement simplifié mais dans mon appli, mon formulaire est beaucoup plus long.
Pouvez-vous me confirmer que ceci serait correcte ? :

Code:

---

1 2	this.myformGroup.setValue(this.allData[1]); this.myformGroup.controls['category'].setValue(this.allData[0].category.id);

---

la première ligne me permet de 'setter' tous les autres champs de mon formulaire.


2- Quand je soumets mon formulaire, je recupère un object tel que

Code:

---

1 2	category: 1 title: "title 1"

---

Je dois donc refaire mon object pour qu'il corresponde à ce qui est attendu par l'api?

Code:

---

1 2 3 4 5 6 7 8

onSubmit(formData) { const result = { title: formData.title, category: this.allCategories.find(x => x.id == formData.category) }; this.myService.save(result); }

---

Existe t-il une meilleure solutiond d'après vous?

1-

Code:

---

1 2 3 4

this.myformGroup.setValue(this.allData[1]); // ça fonctionne sauf pour category mais comme tu le set après, ça passe ! this.myformGroup.controls['category'].setValue(this.allData[0].category.id);

---

c'est quand même pas propre parceque le json et le formulaire ne corresponde pas....


** faire plutôt, champs par champs, tant pis c'est long mais au moins c'est propre

Code:

---

1 2 3

this.myformGroup.controls['title'].setValue(this.allData[0].title); this.myformGroup.controls['category'].setValue(this.allData[0].category.id);

---

pourquoi ?
imagine, un jour l'api t'envoi un json avec une petite erreur. si tu set tout le json dans le formulaire, l'erreur ne va pas se voir. avec l'erreur il va manquer une donnée... mais ça va fonctionner quand meme
et hop tu te retrouve avec un bugue qui sera difficile à detecter.

en settant champs par champs, si il y a une erreur... alors angular va déclencher une erreur et arreter ... c'est bien mieux

à la récupération, si tu as un gros json alors faut faire à l'envers

Code:

---

1 2 3 4 5 6 7 8

// récupération du résultat du formulaire const title = this.myformGroup.controls['title'].value; const category = this.allCategories.find(x => x.id == this.myformGroup.controls['category'].value);   //affectation au json monjson.title = title; monjson.category= category;

---

2-
oui, très bien !

------------------------------------------------

bien souvent, on a de l'api une certaine structure qui ne correspond pas à la structure du formulaire qu'on voudrait
il faut donc l'adapter à l'initialisation et à la récupération


----------------------------------------------
à savoir:
bonne pratique d'utiliser le typage et les modèles de données

/models/i-category.ts

Code:

---

1 2 3 4 5

export interface ICategory { id: string; title: string; }

---

/models/i-product.ts

Code:

---

1 2 3 4 5 6 7 8 9 10 11

import {ICategory} from './i-category'; export interface IProduct { id: string; title: string; price: number; description: string; category: ICategory; image?: string; // le ? pour indiquer que image est "optionnel" (pas obligé qu'il soit renseigné) }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

products: IProduct[]; product: IProduct; ... ... this.productService.getProducts().subscribe((products: IProduct[]) => { this.products = products; });   this.productService.getProduct().subscribe((product: IProduct) => { this.product = product; });

---

comme ça avec le typage, si il y a une erreur de l'api ça pete

super ça marche nickel.
Merci pour m'avoir débloquer et pour m'avoir permis d'être plus proche des bonnes pratiques :)