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