Updates to Angular form control values are not triggering notifications

Question

Updates to Angular form control values are not triggering notifications

I am currently working with a basic form control that subscribes to the valueChanges observable.

@Component({
  selector: 'my-app',
  template: `
       <input [formControl]="control" />
       <div>{{ name$ | async | json }}</div>
   `
})
export class AppComponent implements OnInit {
  name$: Observable<string>;
  control;

  constructor(private builder: FormBuilder) {
    this.control = this.builder.control('');
  }

  ngOnInit() {
    this.name$ = this.control.valueChanges
      .pipe(
        map((name) => {
          console.log('fired', name)
          return name;
        })
      );


    this.control.setValue('2');
  }
}

However, I have encountered an issue where when I call setValue, the observer does not receive any notification. It appears that the async pipe is not functioning as expected. Strangely, if I wrap the setValue method in a setTimeout, it starts working correctly. Can anyone shed some light on why this behavior occurs?

In an attempt to solve this issue, I also tried using the shareReplay() method, but unfortunately, it did not resolve the problem either.

angular typescript rxjs

Answer 1

Answer №1

This is a single solution to the problem:

this.control.setValue('2'); // Move any changes to the top for the startWith operator 
this.name$ = this.control.valueChanges
  .pipe(
    startWith(this.control.value),
    map((name) => {
      console.log('fired', name)
      return name;
    })
  );

Another approach to make it function without using the async operator is to subscribe to the value changes before the control value changes to '2' and capture all subsequent changes:

this.control.valueChanges
  .pipe(
    map((name) => {
      console.log('fired', name)
      return name;
    })
  )
  .subscribe ( v => this.value = v )

Template:

{{value}}

The reason the example with async doesn't work is that the async operator subscribes to the observable, but at the time of subscription, the current value of the control is '2', so no changes are emitted. Another point to note is that observables are lazy, so when you subscribe, you only get the current value, any previous changes are not visible.

Answer 2

This is a single solution to the problem:

this.control.setValue('2'); // Move any changes to the top for the startWith operator 
this.name$ = this.control.valueChanges
  .pipe(
    startWith(this.control.value),
    map((name) => {
      console.log('fired', name)
      return name;
    })
  );

Another approach to make it function without using the async operator is to subscribe to the value changes before the control value changes to '2' and capture all subsequent changes:

this.control.valueChanges
  .pipe(
    map((name) => {
      console.log('fired', name)
      return name;
    })
  )
  .subscribe ( v => this.value = v )

Template:

{{value}}

The reason the example with async doesn't work is that the async operator subscribes to the observable, but at the time of subscription, the current value of the control is '2', so no changes are emitted. Another point to note is that observables are lazy, so when you subscribe, you only get the current value, any previous changes are not visible.

Answer 3

Answer №2

The issue with the previous attempt was that the view was not initialized when the function was called from ngOnInit. To fix this, the code should be placed in the ngAfterViewInit() method:

import AfterViewInit from '@angular/core';
export class AppComponent implements AfterViewInit{ 
   ngAfterViewInit() {
    this.name$ = this.control.valueChanges
      .pipe(
        map((name) => {
          console.log('fired', name)
          return name;
        })
      );


    this.control.setValue('2');
  }
}

It is important to test the updated code to ensure its correctness.

Answer 4

The issue with the previous attempt was that the view was not initialized when the function was called from ngOnInit. To fix this, the code should be placed in the ngAfterViewInit() method:

import AfterViewInit from '@angular/core';
export class AppComponent implements AfterViewInit{ 
   ngAfterViewInit() {
    this.name$ = this.control.valueChanges
      .pipe(
        map((name) => {
          console.log('fired', name)
          return name;
        })
      );


    this.control.setValue('2');
  }
}

It is important to test the updated code to ensure its correctness.

Answer 5

Answer №3

If you're looking for a general solution to create an observable of a form control value in Angular:

this.value$ = defer(() => {
  return this.control.valueChanges.pipe(startWith(this.control.value));
});

When you use defer, it ensures that the startWith value will reflect the actual value of your form when the observable is subscribed to. Without defer, the startWith value would only be the form value at the time the observable is created, not when it's subscribed.

To make this reusable across your app, you can encapsulate this logic in a utility function:

// utils.ts
export function observeControlValue$(formControl: AbstractControl): Observable<any> {
    return defer(() => {
        return formControl.valueChanges.pipe(startWith(formControl.value));
    });
}

// component.ts
this.value$ = observeControlValue$(this.control);

Answer 6

If you're looking for a general solution to create an observable of a form control value in Angular:

this.value$ = defer(() => {
  return this.control.valueChanges.pipe(startWith(this.control.value));
});

When you use defer, it ensures that the startWith value will reflect the actual value of your form when the observable is subscribed to. Without defer, the startWith value would only be the form value at the time the observable is created, not when it's subscribed.

To make this reusable across your app, you can encapsulate this logic in a utility function:

// utils.ts
export function observeControlValue$(formControl: AbstractControl): Observable<any> {
    return defer(() => {
        return formControl.valueChanges.pipe(startWith(formControl.value));
    });
}

// component.ts
this.value$ = observeControlValue$(this.control);

Answer 7

Answer №4

When working with reactive forms, it's recommended to use FormControl instead of FormBuilder for initialization.

To initialize your control, follow this example :

export class AppComponent implements OnInit {
public control = new FormControl('');

In your HTML, use:

<input type="text" [formControl]="control">

With this setup, you won't need to use Observable<string>, just:

<div>{{ control.value | json }}</div>

For more details, refer to the ReactiveForm documentation: https://angular.io/guide/reactive-forms

Answer 8

When working with reactive forms, it's recommended to use FormControl instead of FormBuilder for initialization.

To initialize your control, follow this example :

export class AppComponent implements OnInit {
public control = new FormControl('');

In your HTML, use:

<input type="text" [formControl]="control">

With this setup, you won't need to use Observable<string>, just:

<div>{{ control.value | json }}</div>

For more details, refer to the ReactiveForm documentation: https://angular.io/guide/reactive-forms

Updates to Angular form control values are not triggering notifications

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Adding form input fields in real-time by clicking the add button

Filter and transfer data from one Angular array to another

"Experience the power of utilizing TypeScript with the seamless compatibility provided by the

What is the process for integrating unit tests from external sources into an Angular project following an upgrade to version 15

Winston's createLogger function is not defined

Utilizing ElementRef in Angular 4 to close dropdown when clicking outside of it

When there is only one value, the BehaviorSubject can be hit multiple times

Issue with subscribing in a MEAN stack application

Is there a way to incorporate timeouts when waiting for a response in Axios using Typescript?

What is the best way to terminate a connection in @aspnet/signalr?

Changing the value of a textarea in Angular forms using JavaScript

How to bring in a specific module using its name in TypeScript

What is the best way to define a category in order to utilize a saved string as a variable for referencing it?

What is the best way to remove all validators from a different component in Angular 7 using reactive forms?

Having trouble rendering Next.JS dynamic pages using router.push()? Find out how to fix routing issues in your

Select a randomly generated number from an array, which dynamically updates every time the browser is refreshed

Encountering issues with importing a module from a .ts file

What is the best way to reproduce the appearance of a div from a web page when printing using typescript in Angular 4?

Retrieving the value of an object using a key in TypeScript

Incorporating a background image into a mat-dialog