在Angular中，通过FormControl或FormGroup创建表单时，可以使用valueChanges方法获取当前表单的值变化。valueChanges方法会返回一个Observables对象，以便我们可以在组件中使用subscribe方法订阅该对象来监听值变化。

然而，如果我们没有正确捕获valueChanges事件的Observable对象，就无法根据更改更新UI。

以下是解决此问题的示例代码：

1.在组件类的构造函数中创建FormGroup：

import { FormGroup, FormControl } from '@angular/forms';
import { map } from 'rxjs/operators';
    
export class MyComponent {
    myForm: FormGroup;

    constructor() {
        this.myForm = new FormGroup({
            name: new FormControl('')
        });

        this.myForm.valueChanges
            .pipe(map(() => this.myForm.getRawValue()))
            .subscribe((val) => {
                console.log(val); // 在控制台输出表单值变化
            });
    }
}

2.可以使用RxJS中的takeUntil（从@rxjs/operataors导入）操作符来订阅以处理当该组件销毁时 Observable 不再保持活动状态。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
    
@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

    myForm: FormGroup;
    destroy$ = new Subject();

    constructor() { }

    ngOnInit() {
        this.myForm = new FormGroup({
            name: new FormControl('')
        });
        this.myForm.valueChanges.pipe(
           takeUntil(this.destroy$)
        ).subscribe(() => {
            console.log(this.myForm.getRawValue());
        });
    }

    ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }
}

在这个示例代码中，我们使用takeUntil操作符和一个Subject，以确保订阅完成或页面销毁时 Observable 不再保持活动状态。