Discussion :

[Whisper40]

Salut !

La théorie :
Je suis en train de créer deux sélecteur de type "autocomplete" -> (démo, ce n'est pas la mienne): https://stackblitz.com/angular/ndkxa...ter-example.ts
J'ai besoin que lorsque j'arrive sur la page, le premier sélecteur soit remplit de contenu, "une liste de nom doit être dedans".
Une fois le nom sélectionné, alors une requête HTTP doit être lancé avec le nom sélectionné getTagsOfImage(nomImage) pour récupérer des "tags" et remplir mon deuxième sélecteur.
Si je supprime le contenu du premier sélecteur :
- Le premier selecteur doit revenir à l'état initial.
- Le deuxième sélecteur ne doit contenir aucun valeur ( vu qu'aucune image n'a été selectionnée).


Le problème :
-Lors du chargement de la page, une requête part pour chercher des tags alors que l'image n'a pas été selectionnée..
- Lors de la suppression de l'image dans le selecteur, idem, les tags sont recherchés..

TS :

Code javascript :

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
export class ... {
  ...
 
  filteredOptions: Observable<any[]>;
  filteredOptions2: Observable<any[]>;
 
 
 
  constructor(..){
  }
 
  ngOnInit() {
    this.containerForm = this.formBuilder.group({
      ...
      image: new FormControl(' ', Validators.required),
      imageTag: new FormControl('', Validators.compose([Validators.required, Validators.minLength(1)])),
      ...
    });  
 
 
    this.filteredOptions = this.containerForm.controls.image.valueChanges.pipe(
      startWith(''),
      debounceTime(400),
      distinctUntilChanged(),
      switchMap(val => {
            return this.filter(val || '')
       }) 
    )     
  }
 
  searchTagOfImage(): void{ 
 
      this.filteredOptions2 = this.containerForm.controls.imageTag.valueChanges.pipe(
        startWith(''),
        debounceTime(400),
        distinctUntilChanged(),
        switchMap(val => {
 
         //////////////////////// console.log("fired here, should not be !");/////////////
 
              return this.filter2(val || '')
        }) 
      )  
 
  }
 
  filter(val: string): Observable<any[]> {
    console.log("toutes les images");
    // call the service which makes the http-request
    return this.dataService.getImagesAvailable()
     .pipe(
       map(response => response.filter(option => { 
         return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
       }))
     )
  } 
 
 
  filter2(val: string): Observable<any[]> {
    // call the service which makes the http-request
   /////////console.log("IT GOES HERE, BUT SHOULD NOT ! Because this.image.value is empty..");///////////
    return this.dataService.getTagsOfImage(this.image.value)
     .pipe(
       map(response => response.filter(option => { 
         return option.tag.toLowerCase().indexOf(val.toLowerCase()) === 0
       }))
     )      
  }  
 
  displayFn(user: any): string {
    return user && user.name ? user.name : '';
  }
 
  displayFn2(user: any): string {
    return user && user.tag ? user.tag : '';
  }
 
  deleteVariable(variable: string, e?, i?): void {
 
    switch (variable) {
      ...
      case 'image':
        this.containerForm.controls.imageTag.patchValue('', { emitEvent: false });
        this.containerForm.controls.image.patchValue('', { emitEvent: false });
        break;
      case 'imageTag':
        this.containerForm.controls.imageTag.patchValue('', { emitEvent: false });
        break;
      default:
        break;
    }
  } 
 }
}

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
 
<div class="col-md-3">
                <div class="form-group">
                  <label for="inputImageName" class="label">Image du conteneur</label>
                  <nb-form-field>
                    <input [formControl]="image" nbInput fullWidth type="text" placeholder="Image du conteneur" [nbAutocomplete]="auto" />
                    <button nbSuffix nbButton ghost type="button" (click)="deleteVariable('image')">
                      <i class="fas fa-times"></i>
                    </button>
                  </nb-form-field>
                  <nb-autocomplete #auto [displayWith]="displayFn" (selectedChange)="searchTagOfImage()">
                    <nb-option *ngFor="let option of filteredOptions | async" [value]="option.name">
                      {{ option.name }}
                    </nb-option>
                  </nb-autocomplete>
                </div>
              </div>

Ce bug cause aussi qu'au lancement de la page, l'input sélectionné par défaut est le sélecteur de tag..

Merci pour l'aide

[Whisper40]

Je n'ai toujours pas réussit a corriger le problème.
Lors je supprime manuellement le champs image avec la touche supprimer, le problème ne se produit pas, alors qu'en cliquant sur le bouton supprimer c'est comme si un "event" de sélection de contenu était lancé par le patchValue alors que je lui demande de ne pas lancer d'évent.

[krakatoa]

si tu peux mettre ça sur stackblitz parceque comment veux tu debugguer comme ça à l'aveuglette

pour les accès api

tu fais un console.log( (des données)
copie colle la sortie
JSON.stringify(des données)

tu renvoi JSON.parse(xdes données stringifier)
pour simuler l'envois

tu commente bien sur ta requete // http.get( ....

[Whisper40]

J'essaie au maximum de mettre des stackblitz, mais parfois tendu de reproduire le cas..
Je n'ai pas réussi à faire fonctionner le stack sur ce theme : https://stackblitz.com/edit/angular-...p.component.ts

[dukoid]

tu pouvais juste laisser les 2 selects avec l'autocomplete

c'est option et option2 ?

[Whisper40]

Je viens de supprimer l'inutile : https://stackblitz.com/edit/angular-...p.component.ts
option et option2 ont étés renommés

Le stackblitz est ce que j'ai de mon coté actuellement

Je suis sur que le problème vient de là : <nb-autocomplete #auto (selectedChange)="searchTagOfImage()">
et la fonction searchTagOfImage()