How to subscribe to a reactive FormGroup and map the value changes, in angular 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

You need to migrate to RxJS 6: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md — jonrsharpe, Jul 22 '18 at 15:53
@jonrsharpe I am using rxjs6, but the tutorial I am following is older I guess. What should I do? This is the [tutorial](https://codecraft.tv/courses/angular/http/http-with-observables/) — slevin, Jul 22 '18 at 15:57
Either find a more up to date tutorial or adapt the code in the one you're following per the migration guidance. — jonrsharpe, Jul 22 '18 at 15:57
it's only use pipe(operator1,operator2,operator3...). Any way, you needn't use a formGroup, just a Form Control. You can see an example in https://stackoverflow.com/questions/50732416/rxjs-distinctuntilchanged-with-keyup-event/50734973#50734973 — Eliseo, Jul 22 '18 at 17:18
@Eliseo Thanks, but the link you provided shows code for firing search after the value of a text input changes. I want to fix the code that gets fired after either the value of a text input changes or the value of a dropdown changes. — slevin, Jul 23 '18 at 10:31

score 3 · Answer 1 · answered Jul 23 '18 at 01:58

3

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));

answered Jul 23 '18 at 01:58

Christian

2,676
3
15
25

Thanks. Yeah, this is what I came up with and it works. But in the console I get `Type 'Observable' is not assignable to type 'SearchResult[]'. Property 'includes' is missing in type 'Observable'.` referring to the line `this.results = this.nameForm.valueChanges.pipe(` . I declare `results` as `results: SearchResult[];` and in my service I declare the `searchName` as `searchName(name:string, cep:string):Observable{` . I am confused by the error, what goes wrong? Any ideas? Thank you – slevin Jul 23 '18 at 10:37
Your service is returning an Observable. I'm assuming you're making an http request? That's asynchronous and thus Angular handle's that by returning an Observable. Instead of the map operator, use the switchMap operator, and within your subscribe function you'll see the results. – Christian Jul 23 '18 at 17:09

How to subscribe to a reactive FormGroup and map the value changes, in angular 6

1 Answers1