在Angular中,valuesChanges()函数返回一个Observable,你可以使用subscribe()方法订阅它来获取表单值的更改。然而,有时候valuesChanges()在接收到下一个值之前可能不会触发订阅的回调函数。
以下是解决这个问题的一种方法:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit, OnDestroy {
myForm: FormGroup;
formChangesSubscription: Subscription;
constructor() { }
ngOnInit() {
this.myForm = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});
this.formChangesSubscription = this.myForm.valueChanges.subscribe(value => {
console.log(value);
// 执行你的逻辑操作
});
}
ngOnDestroy() {
this.formChangesSubscription.unsubscribe();
}
}
在组件的ngOnInit()方法中,创建一个FormGroup对象并定义FormControl对象。然后,使用subscribe()方法订阅valueChanges()函数并在回调函数中执行你的逻辑操作。
在组件的ngOnDestroy()方法中,取消订阅formChangesSubscription以避免内存泄漏。
通过以上步骤,你现在应该能够正确地订阅表单值的更改,并在每次更改时执行你的逻辑操作。