Listening for value changes on a reactive form seems to be a challenge for me

Question

While attempting to listen for value changes on a reactive form, I ran into the following error:

This expression is not callable. Type 'Observable<string | null>' has no call signatures.

searchWord = this.fb.group({
  word: ['']
});

ngOnInit(): void {
  this.searchWord.get('word')!.valueChanges()
}

Answer 1

Answer №1

Make sure to subscribe to the valueChanges event, as it is not a regular function but an observable.

this.wordToSearch.get('word').valueChanges.subscribe((word) => {
  console.log(word);
});

I trust this solution will help resolve your problem!

Answer 2

Make sure to subscribe to the valueChanges event, as it is not a regular function but an observable.

this.wordToSearch.get('word').valueChanges.subscribe((word) => {
  console.log(word);
});

I trust this solution will help resolve your problem!

Answer 3

Building on the previous answer, it is important to note that valueChanges functions as a Subject and requires a value change to trigger.

To immediately trigger it (for example, when utilizing it with combineLatest), you would write it this way:

this.wordToSearch.get('word').valueChanges.pipe(
  startWith(this.wordToSearch.get('word').value)
)

Alternatively, you can input any desired value instead of relying on the form input itself:

this.wordToSearch.get('word').valueChanges.pipe(
  startWith('')
)

Answer 4

Building on the previous answer, it is important to note that valueChanges functions as a Subject and requires a value change to trigger.

To immediately trigger it (for example, when utilizing it with combineLatest), you would write it this way:

this.wordToSearch.get('word').valueChanges.pipe(
  startWith(this.wordToSearch.get('word').value)
)

Alternatively, you can input any desired value instead of relying on the form input itself:

this.wordToSearch.get('word').valueChanges.pipe(
  startWith('')
)