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