Discussion :

[nosferatu]

Bonjour, je travaille actuellement sur un projet angular et je rencontre un problème surprenant. J'utilise un tableau de nombres dans un composant angular, les éléments de ce tableau sont liés à une liste d'éléments de type input grâce à un ngFor. Quand un changement de valeur est détecté dans l'un des inputs la cellule correspondante du tableau est mise-à-jour. Après vérification, les valeurs du tableau sont correctes.

Cependant lorsque j'introduis une nouvelle valeur dans un des input, il arrive que parfois cela change la valeur d'un autre input (i.e. cette nouvelle valeur est aussi affectée à cet input). Ce comportement non-désiré se produit avec les autres inputs lorsque ceux-ci ont la même valeur initiale, il semble aussi que ce soit toujours les inputs qui se situent plus loin dans la boucle...

Ce qui est complètement incompréhensible, c'est que si j'affiche le contenu du tableau après l'input sous la forme de simple texte cote-à-cote avec les inputs, les valeurs textuelles affichées sont correctes.

J'ai testé le fait de mettre des noms et des ids uniques à chacun des inputs afin qu'angular puisse les distinguer... sans résutat le problème persiste.

J'ai réussi à reproduire le problème sur un jsfiddle dont voici le lien : https://jsfiddle.net/bruno19/qab9u4fw/49/
Le problème est immédiatement visible en changeant la 1ere value des inputs en '2', le second input prend alors la valeur '2' (même si la valeur du second élément du tableau reste 1). Le jsfiddle utilise la version 4 d'angular, mais mon projet original utilise la version 6 et le problème reste identique.

Si quelqu'un a une idée du pourquoi de ce comportement et comment le corriger... le but étend bien entendu que les values des inputs et les valeurs des éléments du tableau soient toujours synchronisées.

Voici le code du composant

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
 
let { Component, NgModule, OnInit } = ng.core;
 
@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let v of values; let i = index;" style="float: left;"><input type="text" name="input-{{i}}" [value]="v" (change)="onChange(i, $event)"/><p>{{ v }}</p></div>
  `,
})
class HomeComponent implements OnInit {
	  public values: number[] = [];
		n = 5;
    ngOnInit() {
        for(let i = 0; i < this.n; i++)
        	this.values.push(1);
    }
   onChange(i: number, event)
    {
    	this.values[i] = parseInt(event.target.value);
    }
}

et voici le template

Code :

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

1
2
3
4
5
 
<div *ngFor="let v of values; let i = index;" style="float: left;">
  <input type="text" name="input-{{i}}" [value]="v" (change)="onChange(i, $event)"/>
  <p>{{ v }}</p>
 </div>

[pterrat]

Salut,

Il s'agit probablement d'un problème lié à l'event bubbling.

J'ai une bonne nouvelle pour toi. Tu peux faire plus simple et te compliquer moins la vie.

Tu peux utiliser le two ways data-binding, soit [(ngModel)].

Si tu veux vraiment parser sur le (change), tu peux utiliser l'event de ngModel : (ngModelChange).

Ps : je te donne les premieres pistes, j'éditerai mon message ultérieurement pour faire une réponse (complète)

[Jimmy_]

Bonjour,

A mon avis tu vas au devant de tas de problèmes avec Template-driven form sur ce type de formulaire.
Ton tableau est construit dynamiquement il te faut donc utiliser les ReactiveForm et utiliser par exemple un FormArray pour stocker tes inputs.
Cela va te permettre de mieux suivre ton modèle et d'ajouter ou d'enlever des contrôles programmatiquement.

Bon courage,