Angular Valuechanges not firing first time-CodePudding

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

CodePudding user response：

Every time your input changes, you are creating a new subscription. Nothing happens at first because no subscriptions exist yet.

Just subscribe to valueChanges once on init. Use a loop if you have multiple.

ngOnInit(){
  this.uiForm.get(this.subControl.name)?.valueChanges.pipe(...).subscribe(...);
}

<input type="text" formControlName='{{subControl.name}}'/>

I'm assuming subControl is a component property, which might not be true. But I'm sure you get the idea.