How to add debounce time for list of input tags in reactive form angular 9 and detect which input tag getting type? - angular-reactive-forms

Question

I have a list of inputs using ngFor + input I am displaying it as below
<div*ngFor="let esControl of extraServicesControls.controls; let i = index; last as isLast; first as isFirst" [formGroup]="esControl">
<input
type="number"
name=""
id=""
class="form-control form-control-sm"
aria-label="Enter insured amount"
[value]="
esControl.value.specialService?.inputParameters &&
(esControl.value.specialService?.inputParameters)[0]?.value
"
(keyup)="valuechangeInput($event.target.value, esControl.value.specialService)"
/>
</div>
How to call API on each input in list with debounce time of 1000 ms when type letter any input

Answer 1

For this issue I am suggesting to use angular reactive forms.
In order to user Angular reactive forms
Import reactive forms module to your module
import { ReactiveFormsModule } from '#angular/forms';
#NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }
In the ts file create a new formGroup
import { debounceTime} from 'rxjs/operators';
import { FormBuilder } from '#angular/forms';
constructor(private fb:FormBuilder){
this.form= this.fb.group({
insertAmount: ''
});
//Then subscribe for valuechange
this.form.valueChanges.pipe(debounceTime(500)).subscribe((val)=>{
there is a new value for the input. Check logic here
})
}
In this code the 500 means the amount of ms the stream has to wait before emitting a new value. In the mean time all the new value will be discarded.
More detail about reactive forms:https://angular.io/guide/reactive-forms
More detail about RXJS debounceTime operator https://www.learnrxjs.io/learn-rxjs/operators/filtering/debouncetime
The reactive form is a pretty good kind of approach to achieve such debounceTime functionality.
The simpler approach is similar to what you did
html
<input
type="number"
name=""
id=""
class="form-control form-control-sm"
aria-label="Enter insured amount"
[value]="
esControl.value.specialService?.inputParameters &&
(esControl.value.specialService?.inputParameters)[0]?.value
"
(keyup)="valuechangeInput($event.target.value,i)"
/>
</div>
.ts
import {Replaysubject} from "rxjs"
private inputValue: Replaysubject<string[]>= new Replaysubject()
constructor(private fb:FormBuilder){
this.inputValue.pipe(debounceTime(500)).subscribe((val)=>{
there is a new value for the input. Check logic here
})
}
valuechangeInput(value:string,index:number){
this.inputValue.next({value,index});
}