在Angular中,使用FormControl对象来管理表单控件的值和状态。当使用[valueChanges]绑定来监听FormControl值的变化时,如果发现不起作用,可能是由于以下原因:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent implements OnInit {
myControl: FormControl;
ngOnInit() {
this.myControl = new FormControl('');
}
}
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent implements OnInit {
myControl: FormControl;
ngOnInit() {
this.myControl = new FormControl('');
this.myControl.valueChanges.subscribe(value => {
console.log(value);
});
}
}
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MyFormComponent } from './my-form.component';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
],
declarations: [MyFormComponent]
})
export class MyFormModule { }
如果以上步骤都正确无误,但[valueChanges]仍然不起作用,可以尝试使用ChangeDetectorRef来手动触发变化检测:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent implements OnInit {
myControl: FormControl;
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit() {
this.myControl = new FormControl('');
this.myControl.valueChanges.subscribe(value => {
console.log(value);
this.cdr.detectChanges(); // 手动触发变化检测
});
}
}
通过这些步骤,你应该能够解决FormControl的值变化不起作用的问题。
上一篇:Angular的FormControl在blur事件后异步验证器仍然获取旧值。
下一篇:Angular的FormGroup的patchValue/setValue方法不会触发属性装饰器的getter方法。