在html 中定义了 FromGroup,怎么来监听用户输入值的变化呢?

可以使用valueChanges 来订阅变化。

this.myForm.valueChanges.subscribe(val => {
// to do
});

首先,实例化FromGroup

  initFormControls() {
this.form = this._formBuilder.group({
ipCtrl: new FormControl('', [Validators.required, Validators.pattern(Validator.ipReg)]),
snmpCommunityCtrl: new FormControl('', [Validators.maxLength(24)]),
descriptionCtrl: new FormControl('', [Validators.maxLength(255)]),
enabledBGPCtrl: new FormControl(),
});
}

然后,定义一个 onFormChanges 方法来监听 form的变化


onFormChanges(): void {
// watch the whole form
this.form.valueChanges.subscribe(val => {
console.log('onFormChanges', val);
}); // watch the specific form control
this.form.get('enabledBGPCtrl').valueChanges.subscribe(val => {
console.log('onFormChanges', val);
}); }

在ngInit 时调用以上两个方法

  ngOnInit() {    

    this.initFormControls();

    this.onFormChanges();
}

Angular5 reactive Forms Listening for Changes 监听表单变化的更多相关文章

  1. EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动

    在上一篇博客中我们表述完了防止提交成功后多余操作提交的一个过程:其中的精髓在于ajax的触发事件的使用. 而这篇博客主要想说明一下如何实时的判断出表单是否发生变化. 问题表述: 在网页前端的开发过程中 ...

  2. HTML5 oninput实时监听输入框值变化的完美方案

    在网页开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理组合快 ...

  3. 【转载】实时监听输入框值变化的完美方案:oninput & onpropertychange

    oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有 ...

  4. 实时监听输入框值变化:oninput & onpropertychange

    结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化. oninput 是 HTML5 的标准事件,对于检测 textarea, i ...

  5. js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange

    (1)     先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#username').bin ...

  6. JS 获取和监听屏幕方向变化(portrait / landscape)

    移动设备的屏幕有两个方向: landscape(横屏)和portrait(竖屏),在某些情况下需要获取设备的屏幕方向和监听屏幕方向的变化,因此可以使用Javascript提供的 MediaQueryL ...

  7. 实时监听输入框值变化的完美方案:oninput & onpropertychange

    实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...

  8. 监听EditText的变化

    http://liangruijun.blog.51cto.com/3061169/729505 之前博客上的有关EditText的文章,只是介绍EditText的一些最基本的用法,这次来深入学习一下 ...

  9. input 即时搜索 监听输入值的变化

    在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,监听不了右键的复制.剪贴和粘贴这些操作,处理 ...

随机推荐

  1. shell脚本日志指南(1)

    1.初始化日志文件.对文件的大小进行判断和压缩 LOG=$ if [ -e "${LOG}" ];then LOG_SIZE=`ls -l "${LOG}"| ...

  2. Vue:列表展开和收起(超过一定行数时显示‘查看更多’按钮)

    前言:前端小白记录的一些小功能~ 公司开发中的小程序中有做任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了可以开始了,说多了就烦了 1.首先是css样式,因为设计稿上是超过两行 ...

  3. DES加密 DESEncrypt

    /// <summary> /// DES加密/解密类. /// </summary> public class DESEncrypt { public DESEncrypt( ...

  4. 彩色图像--色彩空间 CMY(K)空间

    学习DIP第63天 转载请标明本文出处:***http://blog.csdn.net/tonyshengtan ***,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管,欢迎共同开发:http ...

  5. 降维算法----PCA原理推导

    1.从几何的角度去理解PCA降维 以平面坐标系为例,点的坐标是怎么来的? 图1                                                             ...

  6. Horizon7.9部署和克隆问题汇总

    1  基础环境说明 采用Windows server +SQL Server 2014进行部署,对接现有环境中的AD预控,系统版本为Windows server .桌面虚拟化软件版本采用Horizon ...

  7. python学习之路(15)

    map/reduce Python内建了map()和reduce()函数. 如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on ...

  8. Java并发编程的艺术笔记(九)——FutureTask详解

    FutureTask是一种可以取消的异步的计算任务.它的计算是通过Callable实现的,多用于耗时的计算. 一.FutureTask的三种状态 二.get()和cancel()执行示意 三.使用 一 ...

  9. winscp连接后目录名称乱码

    1.点击[编辑](点后变为保存按钮)按钮,高级按钮变为可用,点击[高级] 2.文件名utf-8编码,默认为“自动”,勾选为“开启”

  10. kotlin 简单处理 回调参数 加?

    Kotlin Parameter specified as non-null is null 2017年10月18日 17:21:49 amiko_ 阅读数:9017    版权声明:本文为博主原创文 ...