在Angular中,可以使用FormControl来创建响应式表单输入视图,并且可以通过订阅FormControl的valueChanges来获取输入值的变化。下面是一个示例代码:
首先,在组件的初始化中创建FormControl,并订阅其valueChanges:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
输入值: {{ myControl.value }}
`
})
export class MyFormComponent implements OnInit {
myControl: FormControl;
ngOnInit() {
this.myControl = new FormControl('');
this.myControl.valueChanges.subscribe(value => {
console.log('输入值变化:', value);
});
}
}
在上面的代码中,创建了一个FormControl,并将其绑定到了input元素的formControl属性上。通过插值表达式{{ myControl.value }},我们可以在视图中显示输入值。
在组件的ngOnInit方法中,订阅了FormControl的valueChanges事件。每当输入值发生变化时,回调函数会被触发,我们可以在回调函数中处理输入值的变化。
这样,每当用户在输入框中输入内容时,视图中的输入值会动态更新,并且可以在回调函数中进一步处理这些变化。