Angular Valuechanges not firing first time

Question

I have a input button, where onChange, I am calling a function. In that funtion, I am checking for valueChanges. Somehow, the subscribe to the valueChanges is not getting triggered on the first tab out after inputting a value.

Here are some code snippets: HTML:

<input type="text" formControlName='{{subControl.name}}' 
(change)="fetchData(subControl.name, 
 true)"/>

TS:

public fetchData(formControlName: string, fetchData: boolean): void {
if (this.primaryControls.indexOf(formControlName) !== -1 && 
   fetchData) {
  this.uiForm.get(formControlName)?.valueChanges **//fine till here. Gets executed**
    .pipe(
      debounceTime(1000)
    )
    .subscribe(data => { **// This subscribe is not firing**
      if (!this.uiForm.dirty) {
        return;
      }
         //do some stuff here
     }});

Answer 1

You can make use of startWith() with some initial value inside your pipe to fire the subscription the first time.
You can optionally include distinctUntilChanged() in the pipe as well.

this.uiForm.get(this.formControlName)?.valueChanges.pipe(debounceTime(1000), distinctUntilChanged(), startWith(this.uiForm.get(this.formControlName).value)).subscribe(...);