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 · 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

1 Answers1