监听Angular响应式表单值变化报错：Observable无调用签名

错误原因 #

valueChanges是FormControl的属性（类型为Observable<string | null>），并非可调用的方法，你错误地给它添加了括号()，导致类型校验报错。

修正后的代码 #

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

ngOnInit(): void {
  // 移除valueChanges后的括号，直接订阅这个Observable
  this.wordToSearch.get('word')!.valueChanges.subscribe(value => {
    // 在这里处理值变化的业务逻辑
    console.log('当前输入值:', value);
  });
}

额外优化建议 #

• 避免强制非空断言（!），可以用可选链操作符做安全检查：

  this.wordToSearch.get('word')?.valueChanges.subscribe(...)
  

• 组件销毁时记得取消订阅，防止内存泄漏：

  import { Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  
  private destroy$ = new Subject<void>();
  
  ngOnInit(): void {
    this.wordToSearch.get('word')?.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => {
        console.log('当前输入值:', value);
      });
  }
  
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
  

内容的提问来源于stack exchange，提问作者Antonio