CODEWITHSUNDEEP
angulartypescriptangular14
Rahul Mukherjee
Rahul Mukherjee

Reputation: 157

Angular Valuechanges not firing first time

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

Upvotes: 2

Views: 7274

Answers (2)

RITZ XAVI
RITZ XAVI

Reputation: 3789

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(...);

Upvotes: 5

Chris Hamilton
Chris Hamilton

Reputation: 10944

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.

Upvotes: 5

Related Questions