在Angular中,当表单控件的值发生变化时,可以使用valueChanges
属性来订阅值的变化。然而,valueChanges
只会在控件的值发生变化时才会触发,如果只是修改了控件的属性而没有实际改变值,valueChanges
是不会被触发的。
要解决这个问题,可以使用markAsTouched
方法来标记控件为已触摸状态。这样,即使没有实际改变值,也会触发valueChanges
事件。
以下是一个示例代码:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent {
myControl = new FormControl('initial value');
constructor() {
this.myControl.valueChanges.subscribe(value => {
console.log('Value changed:', value);
});
}
changeValue() {
this.myControl.setValue('new value');
this.myControl.markAsTouched(); // 标记控件为已触摸状态
}
}
在上面的代码中,我们创建了一个FormControl
实例myControl
,并在构造函数中订阅了valueChanges
事件。当点击按钮时,调用changeValue
方法来改变控件的值,并通过markAsTouched
方法来标记控件为已触摸状态,从而触发valueChanges
事件。
这样,无论是通过实际改变值还是改变控件属性,都能够正常触发valueChanges
事件并得到通知。
上一篇:Angular表单控件别名