用户登录

中秋活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

在组件的模板里可以访问 FormControl 的 value 属性,获取到它的当前的值。打开 RegisterComponent 的模板文件,在这个 Username 标签文字的右边,用插值的形式绑定输出一个 username 的 value 属性的值。

回到浏览器,在这个文本框里输入点东西,你会发现在绑定输出了 username.value 的地方,会显示文本框里的当前的值。

valueChanges

在组件里面,我们也可以得到使用视图里的文本框输入的值,FormControl 实例上的 valueChanges 属性是个 Observable,在这个 Observable 上,可以得到 FormControl 的每次发生变化的值。

回到组件,在组件的 ngOnInit 生命周期方法里,订阅一下 username 的 valueChanges 这个 Observable,this.username.valueChanges,用一下 subscribe ,提供一个方法参数,这个方法就是 Observable 有值的时候要做的事情。

方法接收一个 value 参数,在方法里用一个 console.log,输出 Username: 加上 value 的值。

预览

再到浏览器上试一下,在这个文本框里输入点东西,文本框的值有变化,我们在组件里订阅了这个变化,要做的事情就是在控制台上输出一个 Username ,然后是发生变化的值。

setValue

在组件里可以使用 FormControl 实例的 setValue 设置它的值。在这个 ngOnInit 里面,再用一下 this.username.setValue,把要设置的值交给这个方法,比如 bruce_wang。

现在,文本框上会显示在组件里使用 setValue 设置的这个值。

管理表单元素的值《 Angular:表单 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点