如何订阅反应式FormGroup并映射值更改（角度6）

Question

I have a simple form in angular 6 that has only a textfield and a dropdown. What I want is to observe that form and check for every change in that form. So either a letter it is typed in the textfield or the dropdown changes, I want to call a function.

The form group is like so

  nameForm = this.formBuilder.group({
    name:['',Validators.required],
    cepDrop:['construction']
  });

and my logic is

everytime a form value changes, wait a little until no other changes are made, grab the form object, map its contains into the function and then subscribe to this function's results.

  ngOnInit() {
    this.nameForm.valueChanges
    //.debounceTime(400)
    //.distinctUntilChanged()
    .map( terms => this.mapcmsService.searchName(terms.name, terms.cepDrop))
    .subscribe( value => console.log(value));
  }

First of all debounceTime and distinctUntilChanged give the error Property 'debounceTime' does not exist on type 'Observable<any>'.

The main problem is that map also gives the same error. Property 'map' does not exist on type 'Observable<any>'.

What can I do, so I can fix this? How to observe the whole form group and the map its values to a function ?

Thank you

Answer 1

That's the old way of doing rxjs. Now you're supposed to pass extra operators to the pipe operator like this:

import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';

...

this.nameForm.valueChanges.pipe(
    debounceTime(400),
    distinctUntilChanged(),
    map(terms => this.mapcmsService.searchName(terms.name, terms.cepDrop))
).subscribe( value => console.log(value));