The observable in Angular2's form control valueChanges never reaches completion

Question

The observable in Angular2's form control valueChanges never reaches completion

Currently, I am working on implementing a simple loader for my search bar to indicate that searching is in progress. My plan was to assign the value "loading" to a variable in the subscribe callback of the valueChanges observable from my form control and then set it to an empty string in the complete callback. However, I have encountered an issue where the complete callback is never executed.

I also attempted to add a callback using finally on the observable, but unfortunately, this callback is also not being triggered.

The code snippet:

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

javascript typescript angular rxjs observable

Answer 1

Answer №1

It is common for the observable to never be completed, as it allows you to continuously receive values from your search box. The main goal is to be alerted when the search action has been fully executed.

To achieve this, consider implementing something similar to the following code snippet. Assuming that the searchImage function performs the search and returns an 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);
              });
}

For more information on how to use the flatMap operator, refer to the following article:

Answer 2

It is common for the observable to never be completed, as it allows you to continuously receive values from your search box. The main goal is to be alerted when the search action has been fully executed.

To achieve this, consider implementing something similar to the following code snippet. Assuming that the searchImage function performs the search and returns an 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);
              });
}

For more information on how to use the flatMap operator, refer to the following article:

Answer 3

Answer №2

After some reflection, I came to the conclusion that my current method was not working as intended. Upon further investigation, I discovered that I had mistakenly applied debounceTime on my observable. To address this issue, I decided to attach a keyup event listener to my input element. Within this event handler, I updated the value of loadingClass to be "loading". Then, in my subscribe function, I reverted the value back to an empty string.

Answer 4

After some reflection, I came to the conclusion that my current method was not working as intended. Upon further investigation, I discovered that I had mistakenly applied debounceTime on my observable. To address this issue, I decided to attach a keyup event listener to my input element. Within this event handler, I updated the value of loadingClass to be "loading". Then, in my subscribe function, I reverted the value back to an empty string.

Answer 5

Answer №3

Understanding Angular2 Forms can make a big difference for many developers. Angular offers two different ways to build forms: Reactive and Template form. Not knowing the distinction between the two approaches could result in messy applications.

The valuesChanges property belongs to the NgModel directive and the FormControl class, so keep that in mind.

To use the reactive approach, you need to import the ReactiveFormsModule (in your.module.ts):

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

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

This allows you to utilize the [(formControl)] property on your form controls (in template.component.html).

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

For the Template-driven approach, import FormsModule (in your.module.ts):

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

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

This approach has its own form control properties like ngModel (in your.template.ts):

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

Answer 6

Understanding Angular2 Forms can make a big difference for many developers. Angular offers two different ways to build forms: Reactive and Template form. Not knowing the distinction between the two approaches could result in messy applications.

The valuesChanges property belongs to the NgModel directive and the FormControl class, so keep that in mind.

To use the reactive approach, you need to import the ReactiveFormsModule (in your.module.ts):

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

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

This allows you to utilize the [(formControl)] property on your form controls (in template.component.html).

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

For the Template-driven approach, import FormsModule (in your.module.ts):

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

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

This approach has its own form control properties like ngModel (in your.template.ts):

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

The observable in Angular2's form control valueChanges never reaches completion

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the issue where only one of my videos plays when hovered over using UseRef?

Utilize jQuery to toggle classes on multiple elements in web development

The click function for the responsive navbar hamburger is not functioning properly

Having difficulty grasping the significance of the data received from the API response

The array isn't showing any values on the screen

Is there a way for me to display an http status code in my fetch error?

The safeguarding of Angular2 and Laravel against CSRF vulnerabilities

Issue with uploading images in Summernote

How to retrieve user data based on ID using Angular SDK

Assign a class to the element only when the second div also has a class

Adding and deleting an item

Exploring TypeScript Compiler API: Retrieving the resolved type of the 'this' parameter

How come JSON.parse is altering the data within nested arrays?

Unable to send a post request using ajax

Retrieving posted data in SailsJS

Check out the selected values in Ionic 3

How can I limit auto-search results to a specific city in India on Google Maps?

What is the process for dynamically inserting a new object into an array of data objects in Vue.js?

What steps should I follow to integrate AJAX with jQuery in order to store Summernote text in a database?

Issue with JavaScript code for Google Maps API not functioning as expected