如何在angular 7 FormGroup valueChanges中删除多个订阅列表中的特定订阅？

Question

I am using angular 7 Multiple FormControl valueChanges subscribe function.

how do I remove or unsubscribe specific FormControl subscribe function.

FormControlsSubscribe(){
  const FormControlsArray = Object.keys(this.FGroup.controls);
     FormControlsArray.map(controlName => {
     const control = this.FGroup.controls[controlName] as FormControl;
     control.valueChanges.subscribe(change => {
        console.log(controlName + '>>>' + change);
     });
  });
};



RemoveControl(ControlKey: any) {
  this.FGroup.removeControl(ControlKey);
}

I expect the removed control unsubscribed;

Answer 1

Given that you don't assign control.valueChanges.subscribe to any variable, you can't.

Moreover, you will have severe memory leaks with this code. You never close your subscriptions, this is a very dangerous way to manage them.

Answer 2

You can use takeUntil to unsubscribe automatically:

private unsubscribe$: Subject<void> = new Subject<void>();

control.valueChanges
pipe(takeUntil(this.unsubscribe$))
.subscribe(_ => {
  console.log(controlName + '>>>' + change);
});

ngOnDestroy() {
  this.unsubscribe$.next();
  this.unsubscribe$.complete();
}

or you can assign control.valueChanges.subscribe to a variable (Subscription) and unsubscribe that.

let subs: Subscription[] = [];

FormControlsArray.map(controlName => {
  const control = this.FGroup.controls[controlName] as FormControl;
  this.subs.push(control.valueChanges.subscribe(() => {}));
});

ngOnDestroy() {
  this.subs.forEach(sub => sub.unsubscribe());
  this.subs = [];
}