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

Question

I have a situation where I need to listen to the value of the form control from a different component. the valueChanges does this just fine for any changes in the dropdown. However I get a null upon initialization in ngOnInit. Apparently the valueChanges does not get the initial value of the FormControl- only upon changing it. So how can I get both the initial value as well as any subsequent changes?

An example which works fine for any changes, but not for getting an initial value upon load. If this form control already has some initial value in it, this code won't get it

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

Answer 1

You can use the startWith() RXJS operator and provide the initial value of the form control.

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

Demo