Grouping together multiple control value changes

Question

autocomplete functionality to trigger a filter function for each form control respectively.

Is there a way to group the statements instead of individually using multiple observables and separately writing them down as I did below?

this.filteredTypesCodes = this.assetTypeCodeControl.valueChanges
      .pipe(
        startWith(''),
        map(value => value.length >= 2 ? this._filter(value) : [])
      );

    this.filteredSubTypesCodes = this.assetSubTypeCodeControl.valueChanges
      .pipe(
        startWith(''),
        map(value => value.length >= 2 ? this._filter(value) : [])
      );

    this.filteredMakesCodes = this.assetMakeCodeControl.valueChanges
      .pipe(
        startWith(''),
        map(value => value.length >= 2 ? this._filter(value) : [])
      );

score 0 · Answer 1 · answered Dec 11 '20 at 10:42

If you use formGroup to group all form controls together you can then listen to value changes of this formGroup. This will be triggered every time one form control of this form group changes value.

Check something similar here Angular Subscribe valuechanges in formarray in form group

score 0 · Accepted Answer · answered Dec 11 '20 at 10:47

You have merge from Rxjs to merge multiple observables into one, but I don't think it will work for you, because you need each observable separately, what you can do instead, to stop repeating yourself is you can put the repeated code in a separate function, like so:

createFilter(formControl) {
      return formControl.valueChanges
      .pipe(
        startWith(''),
        map(value => value.length >= 2 ? this._filter(value) : [])
      );
}

Then you can use it to create your filters:

this.filteredTypesCodes = this.createFilter(this.assetTypeCodeControl)
this.filteredSubTypesCodes = this.createFilter(this.assetSubTypeCodeControl)
this.filteredMakesCodes = this.createFilter(this.assetMakeCodeControl)

Grouping together multiple control value changes

2 Answers2