Angular 7中的反应式表单提供了一种处理输入属性值在控制器/组件中不会改变,只会在HTML标记上改变的解决方法。下面是一个使用反应式表单的示例代码:
在组件类中,首先导入相关的依赖项:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
然后,在组件类中创建一个FormControl对象,并将其绑定到模板中的输入框:
export class MyComponent implements OnInit {
myControl: FormControl = new FormControl();
ngOnInit() {
this.myControl.valueChanges.subscribe(value => {
console.log('Value changed:', value);
});
}
}
在模板中,将FormControl对象绑定到输入框的ngModel指令上:
在这个示例中,当用户在输入框中输入文本时,FormControl对象的值会发生更改。而且,通过订阅FormControl的valueChanges属性,我们可以在控制器/组件中获取到这个新的值,并对其进行进一步的处理。
请注意,我们还将FormControl对象绑定到输入框的ngModel指令上,以确保用户在HTML标记中的更改能够传递回FormControl对象。
使用这种方法,无论是通过用户的输入还是通过控制器/组件中的其他逻辑改变FormControl的值,都会反映在HTML标记上。