如何使用 RxJs 获取 Angular 表单控件的当前初始值

Question

我有一种情况需要从不同的组件监听表单控件的值。 valueChanges对下拉列表中的任何更改都很好。 但是我在 ngOnInit 中初始化时得到了null 。 显然，valueChanges 没有获得 FormControl 的初始值 - 只有在更改它时才获得。 那么我怎样才能同时获得初始值和任何后续变化呢？

一个适用于任何更改但不适用于在加载时获取初始值的示例。 如果此表单控件中已有一些初始值，则此代码将无法获取它

this.form1.controls['name'].valueChanges.subscribe(change => {
  console.log(change); // Value inside the input field as soon as it changes
});

Answer 1

您可以使用startWith() RXJS 运算符并提供表单控件的初始值。

this.form1.controls.name.valueChanges
      .pipe(startWith(this.form1.controls.name.value))
      .subscribe((v) => console.log(v));

演示