Discussion :

[julien.63]

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 :

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

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

voici le code de mon controller 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
@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 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
<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...

[dukoid]

==> cat.title

Code :

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

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

[julien.63]

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

[krakatoa]

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

Code :

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

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

[julien.63]

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 :

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

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...

[krakatoa]

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 :

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

1
2
3
4
5
0: Object
category: Object
   id: 1
   title: "category 1"
title: "title 1"

ton formulaire

Code :

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

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 :

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

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);

[julien.63]

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 :

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

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 :

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

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"

[krakatoa]

Code :

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

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 ?
sans te manquer de respect, tu as un soucis de vue peut etre ?

[julien.63]

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.
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 :

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

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

et

Code :

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

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 :

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

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

[dukoid]

pour info:

Code :

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

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 :

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

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 :

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

1
2
title: string;
category: string

en faisant ça:

Code :

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

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

c'est comme si tu faisais ça:

Code :

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

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

et donc dans la vue:

Code html :

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

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

donne

Code html :

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

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 :

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

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 :

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

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

[julien.63]

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 :

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

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 :

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

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 :

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

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?

[dukoid]

1-

Code :

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

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 :

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

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 :

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

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 :

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

1
2
3
4
5
 
export interface ICategory {
  id: string;
  title: string;
}

/models/i-product.ts

Code :

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

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 :

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

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

[julien.63]

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