如何使用RxJs获取Angular表单控件的初始值与后续变更值

有两种简单的方法可以解决这个问题，既能拿到初始值，又能监听后续的所有变更：

方法一：使用RxJS的startWith操作符（推荐） #

通过startWith操作符，可以让valueChanges流在订阅时先发射一次控件的初始值，之后再正常响应值的变更。

// 记得先导入startWith
import { startWith } from 'rxjs/operators';

// 在组件初始化逻辑中（比如ngOnInit）
this.form1.controls['name'].valueChanges
  .pipe(startWith(this.form1.controls['name'].value))
  .subscribe(currentValue => {
    console.log(currentValue); // 先输出初始值，之后每次值变更都会输出新值
  });

这个方法的优势在于把初始值和后续变更统一到同一个订阅流里，处理逻辑更连贯。

方法二：手动先获取初始值，再订阅变更 #

如果不需要把初始值和变更值放到同一个流里处理，可以分开操作：

ngOnInit() {
  // 先直接获取初始值
  const initialValue = this.form1.controls['name'].value;
  console.log('初始值:', initialValue);

  // 再订阅后续的变更
  this.form1.controls['name'].valueChanges.subscribe(changedValue => {
    console.log('变更后的值:', changedValue);
  });
}

注意事项 #

如果你的表单是异步初始化的（比如从后端接口拉取数据后才创建表单或设置控件值），要确保在表单完全初始化完成后再执行上述代码，否则可能还是拿不到初始值。比如可以把逻辑放在数据请求的回调里，或者用async/await等待数据加载完成。

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