Angular2 contrôle de formulaire valueChanges observables complète ne s'est jamais appelé

Je suis en train d'essayer de montrer un simple loader sur ma barre de recherche, tandis que la recherche se déroule. J'ai prévu de mettre une variable dans le abonnez-vous de rappel sur le valueChanges observables à partir de mon formulaire de contrôle à une valeur "chargement", et de la mettre à une chaîne vide dans le rappel. Cependant, l'ensemble de la callback n'est appelé.

J'ai aussi essayé d'ajouter un rappel pour enfin sur les observables, mais il n'est jamais appelé.

Mon code:

searchBox: Control = new Control();
loadingClass: string = "";

constructor() {
    this.searchBox.valueChanges
            .debounceTime(400)
            .distinctUntilChanged()
            .subscribe((text: string) => {
                this.imageSearch = text;
                this.loadingClass = "loading";
            }, (err: Error) => {
                console.log(err);
            }, () => {
                this.loadingClass = "";
                console.log("test");
            });
}

OriginalL'auteur Matsura | 2016-05-30

  1. 5

    C'est normal puisque l'observable n'est jamais terminé. Le valueChanges vous permet de recevoir la valeur de votre zone de recherche. En fait, vous souhaitez être averti lorsque la recherche est terminée.

    Donc je voudrais essayer quelque chose comme ça, en supposant que le searchImage ne fait de la recherche et revenir à une observable:

    constructor() {
  this.searchBox.valueChanges
              .debounceTime(400)
              .distinctUntilChanged()
              .flatMap((text:string) => { //<-------
                this.loadingClass = "loading";
                return this.searchImage(text);
              })
              .subscribe((searchResult) => {
                  this.imageSearch = searchResult;
                  this.loadingClass = ""; //<----
              }, (err: Error) => {
                  console.log(err);
              });
}

    Consultez cet article pour l'utilisation de la flatMap opérateur:

    Dans mon template html en fait, j'ai un tuyau qui dépend de la ce.imageSearch attribut, donc je l'ai juste mis dans la s'abonner à la partie. Existe-il des ajustements à votre exemple, donc je peux l'utiliser?
    Avez-vous une idée de comment avoir des modifications uniquement lors de la validation ou vérification de validation dans valueChanges?

    OriginalL'auteur Thierry Templier

  2. 1

    J'ai compris que je suis en train de la mauvaise approche. Au lieu de cela, j'ai réalisé que j'avais debounceTime sur mon observable, donc je me suis inscrit un keyup évènement sur mon contrôle d'entrée, et dans l'ensemble de la valeur de loadingClass à "loading", et dans mon abonnez-vous j'ai défini la valeur de retour est une chaîne vide.

    OriginalL'auteur Matsura

  3. 0

    J'espère que cela pourrait conduire certaines personnes d'obtenir une meilleure compréhension de Angular2 Formes. Angulaire a deux approches différentes formes de bâtiments (Réactif et le Modèle de formulaire). Ne pas être conscient de ce qui pourrait vous conduire à désordre apps.

    valuesChages est une propriété de la directive NgModel, et la classe FormControl (gardez le à l'esprit que).

    Le réactif approches utilisent la ReactiveFormsModule import
    (votre.le module.ts):

    import {ReactiveFormsModule} from '@angular/forms';

@NgModule({
  ...
  imports: [
    ...
    ReactiveFormsModule,
    ...
  ],
  ...
})

    De cette façon, vous pouvez utiliser le [(formControl)] de propriété sur vos contrôles de formulaire (template.component.html).

    <input type="text" class="form-control" id="searchBox"
       required
       [(formControl)]="searchBox"/>

    Modèle axé sur la approché (votre.le module.ts):

    import {FormsModule} from '@angular/forms';

    @NgModule({
      ...
      imports: [
        ...
        FormsModule,
        ...
      ],
      ...
    })

    Cette approche a son propre formulaire de propriétés d'un contrôle, ngModel (votre.de modèle.ts):

    <input type="text" class="form-control" id="searchBox"
       required
       [(ngModel)]="searchBox"/>

    OriginalL'auteur Luillyfe