首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular2 FormGroup -如何确定哪个控件触发了值更改

Angular2 FormGroup是Angular框架中的一个类,用于管理表单中的一组控件。它提供了一种方便的方式来跟踪和验证表单中的各个控件的状态和值。

要确定哪个控件触发了值更改,可以使用FormGroup的valueChanges属性。valueChanges是一个Observable对象,它会在FormGroup中的任何控件的值发生更改时发出通知。

以下是一个示例代码,演示如何使用FormGroup来确定哪个控件触发了值更改:

  1. 首先,在组件中创建一个FormGroup对象,并定义表单控件:
代码语言:txt
复制
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="name" (input)="onInputChange('name')" placeholder="Name">
      <input formControlName="email" (input)="onInputChange('email')" placeholder="Email">
    </form>
  `,
})
export class MyFormComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl(''),
      email: new FormControl(''),
    });
  }

  onInputChange(controlName: string) {
    console.log(controlName + ' value changed');
  }
}
  1. 在模板中,使用formControlName指令将表单控件与FormGroup中的控件关联起来,并使用(input)事件监听控件的值更改。
  2. 在组件中,定义一个onInputChange方法来处理控件值的更改。在这个方法中,你可以根据传入的控件名称来确定哪个控件触发了值更改,并执行相应的操作。

这样,当表单中的任何一个控件的值发生更改时,onInputChange方法会被调用,并输出相应的控件名称。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。腾讯云云服务器提供可扩展的计算能力,适用于各种应用场景。腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库服务,适用于存储和管理数据。

腾讯云云服务器产品介绍链接地址:https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL产品介绍链接地址:https://cloud.tencent.com/product/cdb_mysql

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

我们来看一下用响应式编程如何处理这个逻辑。...就这个需求来看的话,年龄和年龄单位这两个数据要一起来考虑, 上图中(由于太懒,后面的合并虚线就没有画了),上面两个流为原始数据流,一个是年龄的数据流,每次更改年龄数时,这个数据流就产生一个数据:比如一开始初始为...一个人的最终的年龄是通过年龄和年龄单位联合确定的,这也就是说我们需要对这两个流做合并计算。 那么选择什么样的合并方式呢?...比如下面代码中的 constructor(private fb: FormBuilder) { }),用 FormBuilder 构造表单控件数组并赋值给刚才的类型为 FormGroup 的成员变量。...这两个数据流其实是来自于两个控件的变化,而响应式表单获取值的变化是非常简单的就一行: 上面这行代码的意思是从表单的控件数组中取得 formControlName 为 age 的这个控件然后监听其的变化

5.3K10
  • Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...在Angular2中,组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...这通常用在setter中,当类中的更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...Promises vs Observables Promises: 返回单个 不可取消 Observables: 可以使用多个 可取消 支持map,filter,reduce和类似的操作符 ES 2016...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

    17.3K80

    Excel VBA编程问答33题,继续……

    4.KeyDown事件过程中的代码如何取消按键? 5.在用户窗体上对齐控件的最快方法是什么? 6.假设一个控件被重叠控件隐藏。在运行时,如何使隐藏的控件可见?...10.当用户在任何工作表中进行修改操作时,将触发哪个事件? 11.用户如何阻止打开工作簿时触发Open事件? 12.什么是数据验证? 13.你应该在何处放置工作簿级别事件的事件过程?...21.当程序在断点处暂停时,确定程序变量当前的最快方法是什么? 22.是非题:监视窗口中的在程序运行时会不断更新。 23.VBA如何将bugs报告给程序员?...27.如何创建只读属性? 28.是非题:PropertyGet过程的返回必须与PropertyLet过程的参数具有相同的数据类型。 29.如何验证仅接受包含某些的属性的数据?...30.如何在代码中引用对象属性? 31.类方法与常规VBA过程有何不同? 32.什么是辅助方法? 33.在销毁对象之前触发了什么事件? 如果有兴趣,可以在留言中写下你的答案。

    1.9K30

    答案:Excel VBA编程问答33题,继续……

    Keycode参数仅标识密钥,你必须使用Shift参数来确定是否按下Shift键。 4.KeyDown事件过程中的代码如何取消按键? 通过将KeyCode参数设置为0。...调用具有fmTop参数的隐藏控件的ZOrder方法。 7.如何防止用户通过制表键将焦点移到控件上? 将控件的TabStop属性设置为False。 8.如何命名事件过程?...10.当用户在任何工作表中进行修改操作时,将触发哪个事件? Workbook.SheetChange事件。 11.用户如何阻止打开工作簿时触发Open事件? 按住Shift键。...21.当程序在断点处暂停时,确定程序变量当前的最快方法是什么? 将鼠标指针悬停在变量名称上。 22.是非题:监视窗口中的在程序运行时会不断更新。 错误。监视仅在程序进入中断模式时才更新。...29.如何验证仅接受包含某些的属性的数据? 通过在Property Let过程中放置代码来检查新的属性,并仅在正确的情况下接受它。 30.如何在代码中引用对象属性?

    4.2K20

    纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

    作为一款纯前端控件集,WijmoJS 秉承“快如闪电,控优先”的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。...新的React / Redux加密货币跟踪应用程序 本次更新为使用React和Redux的 WijmoJS 控件集增加了加密货币跟踪应用程序,该应用程序是一个财务仪表板,可用于跟踪加密货币值,这些是在用户开发的生产应用程序之后建模的...当属性值更改时,相应的 WijmoJS 类属性会相应更新。目前,更改类属性不需要更改相应的属性。...随着新版本上线,WijmoJS 添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。...WijmoJS – 深度支持Angular、React和Vue的纯前端控件集 快如闪电,控优先。

    7K20

    angular5面试题_大数据面试题

    会做2件事,1)基于npm安装node_modules, 2)自动更改配置文件,保证新的依赖正常工作 关于angular的依赖注入(dependency injection) 依赖注入是Angular实现的一种应用程序设计模式...脏检测的基本原理是存储旧数值,并在进行检测时,把当前时刻的新和旧比对。若相等则没有变化,反之则检测到变化,需要更新视图。 angular2中有了Zone.js。...Promise返回一个;Observable返回0至N个。...Angular 版本如何升级 Angular CLI提供了升级命令(ng update),同时,官网(https://update.angular.io/)也有升级指南。...选择从哪个版本升级到哪个版本后,会给出一步一步的升级命令,直接执行就好。

    4.3K20

    Hands On GUI Application Development in Go

    在图层界面发生变化的时候(例如:打开/关闭对话框),GuiLite将决定各个图层上的像素点,哪个会被最终显示在屏幕上 ?...被点中,dialog的哪个button被点中,并调用buton被点中的回调函数,用于作相应处理(一般会进行button的状态修改及重绘工作) 界面元素如何创建 所有界面元素都继承自c_wnd类的对象,对象被实例化时...,也就完成了界面元素的创建;但此时的界面元素是孤独的,与其他界面元素没有形成联系(没有父母,没有兄弟姐妹) 界面元素如何被管理 新创建的界面元素纳入管理的过程,就是为其添加父母,兄弟姐妹的过程。...attr:属性 is_focus_wnd 判断自己(this)是否可以获得焦点 set_wnd_pos 设置自己(this)相对于父窗口的窗口位置。...x:用户控点的坐标x;y:用户控点的坐标y;action:用户的控类型,包括:按下,释放 on_key 响应用户的按键消息。key:用户点击的按键键值。

    1.1K10

    Android触摸事件_简述兴奋在突触的传递过程

    log输出如下: 紧接着,把对onTouchEvent的更改取消,把CustomButton的dispatchTouchEvent方法的返回设为true,也就是让消息到这里就不往下传递了。...如果返回为false,则消息往下传递,传递到view 视图里面,再由容器或者控件来处理。...首先Activity的dispatchTouch()方法会接受屏消息,如果没有消费对的话消息将传递到容器控件,然后由容器控件的dispatchTouch()方法接受,如果在这里消息也还是没有消费的话,...看结果如何: 发现不是之前想象的那样,还是调用了CustomRelativeLayout的onTouch()方法,这就说明onInterceptTouchEvent()方法没有拦截容器控件屏事件...三、总结 Android系统中将1个down事件、n个move事件、1个up事件整体作为一次逻辑上的控操作,Down事件已经确定了处理事件的对象,则后续的move、up事件也确定了处理事件的对象

    69420

    Angular2:从AngularJS 1.x 中学到的经验

    在《迈向Angular2》第4 章,将会学习如何用Angular 2中的组件和指令来取代AngularJS1.x 中控制器的功能。...在《迈向Angular2》一书第4 章会详细学习组件和脏检测机制。...为了实现这一目的,社区已经开发了一款工具,首先在服务端预先渲染单页应用中的视图,然后再转发给浏览器。本书在编写这段内容的时候,这款工具仍然处在开发的早期阶段,所以它并没有被包含在框架的内核中。...以上代码明确定义了一个(user)属性,这个属性将会在迭代(users)的上下文中创建。 但是,这种语法在输入的时候显得太冗长。所以,开发者可以使用以下简化语法,然后再编译成更冗长的形式: ? ?...JIT 脏检测:运行时动态生成脏检测代码,允许 JavaScript 虚拟机进行深度代码优化。 《迈向Angular2》第4 章,会学习到新的脏检测机制以及它们的配置方法。

    2.7K10

    事件分发工作流程

    因为消费了down事件,意味着接下来的move和up事件都会给这个view处理,也就无所谓分发了。...view分发逻辑的简化伪代码: public boolean dispatchTouchEvent(MotionEvent event){ // 先判断是否存在onTouchListener且返回为...view会先检查是否有onTouchListener且返回是否为true,如果是true则直接返回,否则调用onTouchEvent方法来处理事件。 基于上述的关系,可以得到下面的工作流程图: ?...那么当viewGroup掐断事件流之后,事件的走向又是如何的呢?参看下图:(注意,这里不讨论多指操作的情况,仅讨论单指操作的move或up事件被viewGroup拦截的情况) ?...下一篇文章将简单分析一下如何利用学习到的事件分发知识运用到实际开发中。

    73210

    Excel编程周末速成班第18课:使用用户窗体创建自定义对话框

    UserForm对象以及可以放置在窗体上的控件具有确定对象的外观和行为以及与该对象相关的任何数据的属性和方法。大多数对象还可以检测事件,其中大部分是用户操作,例如用鼠标单击某些内容。...设计界面 在设计用户窗体之前,帮助你了解各种控件的功能以及最终用户窗体如何显示。本节稍后将讨论控件,接下来讲解窗体设计的基础。 提示:要处理窗体上已有的控件,确保已选择工具箱中的箭头图标。...提示:若要确定与该工具箱中的图标相对应的控件,将鼠标光标停留在该图标上一会儿,工具提示显示控件的名称。...要更改属性,单击其名称。然后,进行更改的方式取决于特定的属性: 对于枚举属性(可以采用一组预定义中的任何一个),使用右列中的下拉列表选择。...自我测评 1.用户窗体的三个主要组成部分中的两个是窗体本身和窗体上的控件,第三个主要成分是什么? 2.哪个属性确定用户窗体标题栏中显示的文本? 3.用户窗体在屏幕上的位置是相对于哪一点进行测量的?

    11K30

    WPF 依赖属性绑定不上调试方法

    在写 WPF 程序的时候会遇到依赖属性绑定了,但是没有更新或者没有绑定上的问题,本文告诉大家可以如何调试 依赖属性不对应 在写依赖属性的时候,默认使用快捷键创建,但是如果是自己写的,需要注意引用的类以及属性名字符串是否对应...,如后台代码更改。...可以通过监听依赖属性的修改拿到在哪个地方修改了 通过 DependencyPropertyDescriptor.FromProperty 方法可以拿到依赖属性修改的方法,使用下面代码拿到文本属性被修改...Console.WriteLine("文本被修改"); }); 通过在 Console.WriteLine 这一行添加断点,在执行代码的时候发现进入断点,通过调用堆栈就可以知道是哪个业务修改了属性的...这个方法会用在列表里面的元素和用户控件绑定不上,因为在列表和用户控件里面的上下文可能不是上层元素的上下文而是被指定的,请看WPF Frame 的 DataContext 不能被 Page 继承 没有通知

    1.6K20

    C# SplitContainer 控件详细用法

    此外,还应注意 SplitterRectangle 属性的是随 orientation 属性的变化的。有关更多信息,请参见 SplitterRectangle 属性。...常用属性、方法和事件 FixedPanel 属性 * 确定调整 SplitContainer 控件大小后,哪个面板将保持原来的大小。...2.如何:定义拆分窗口中的大小调整和定位行为 用户可以轻松调整 SplitContainer 控件面板的大小并对其执行各种操作。...这种排列主要是通过在窗体上停靠控件实现的。在停靠控件时,可以确定控件要紧靠父容器的哪个边缘。这样,如果将 Dock 属性设置为 Right,控件的右边缘将停靠在它的父控件的右边缘。...此外,控件停靠边缘的大小将调整为与它的容器控件的大小匹配。有关 Dock 属性工作方式的更多信息,请参见如何:在 Windows 窗体上停靠控件

    2.9K30

    什么是AB test?有哪些流程?有什么用?终于有人讲明白了

    结合Python实现) A/B test需要注意的点 A/B test中要知道的统计学知识 01 A/B test是什么 A/B测试(也称为分割测试或桶测试)是一种将网页或应用程序的两个版本相互比较以确定哪个版本的性能更好的方法...AB测试本质上是一个实验,其中页面的两个或多个变体随机显示给用户,统计分析确定哪个变体对于给定的转换目标(指标如CTR)效果更好。 ?...这个更改可以像单个标题或按钮一样简单,也可以是完整的页面重新设计。然后,一半的流量显示页面的原始版本(称为控件),另一半显示页面的修改版本(称为变体)。 ?...然后,就可以确定这种更改(变体)对于给定的指标(这里是用户点击率CTR)产生正向影响,负向影响或无影响。 实验数据结果可能如下: ?...运行试验:此时,网站或应用的访问者将被随机分配控件或变体。测量,计算和比较他们与每种体验的相互作用,以确定每个用户体验的表现。 分析结果:实验完成后,就可以分析结果了。

    39.1K1010

    AB test | 数据分析师面试必知 !

    Python实现) A/B test需要注意的点 A/B test中要知道的统计学知识 1、A/B test是什么 A / B测试(也称为分割测试或桶测试)是一种将网页或应用程序的两个版本相互比较以确定哪个版本的性能更好的方法...AB测试本质上是一个实验,其中页面的两个或多个变体随机显示给用户,统计分析确定哪个变体对于给定的转换目标(指标如CTR)效果更好。 ?...这个更改可以像单个标题或按钮一样简单,也可以是完整的页面重新设计。然后,一半的流量显示页面的原始版本(称为控件),另一半显示页面的修改版本(称为变体)。 ?...然后,就可以确定这种更改(变体)对于给定的指标(这里是用户点击率CTR)产生正向影响,负向影响或无影响。 实验数据结果可能如下: ?...⑤运行试验:此时,网站或应用的访问者将被随机分配控件或变体。测量,计算和比较他们与每种体验的相互作用,以确定每个用户体验的表现。 ⑥分析结果:实验完成后,就可以分析结果了。

    2.5K31

    数据分析面试中需要你必知必会的内容 !

    Python实现) A/B test需要注意的点 A/B test中要知道的统计学知识 1、A/B test是什么 A / B测试(也称为分割测试或桶测试)是一种将网页或应用程序的两个版本相互比较以确定哪个版本的性能更好的方法...AB测试本质上是一个实验,其中页面的两个或多个变体随机显示给用户,统计分析确定哪个变体对于给定的转换目标(指标如CTR)效果更好。 ?...这个更改可以像单个标题或按钮一样简单,也可以是完整的页面重新设计。然后,一半的流量显示页面的原始版本(称为控件),另一半显示页面的修改版本(称为变体)。 ?...然后,就可以确定这种更改(变体)对于给定的指标(这里是用户点击率CTR)产生正向影响,负向影响或无影响。 实验数据结果可能如下: ?...⑤运行试验:此时,网站或应用的访问者将被随机分配控件或变体。测量,计算和比较他们与每种体验的相互作用,以确定每个用户体验的表现。 ⑥分析结果:实验完成后,就可以分析结果了。

    67220

    PHP初级开发者常见的5种疑问

    在php.ini中有一个允许上传的最大,默认是2MB。必要的时候可以更改; 3). 上传表单一定要记住在form标签中写上enctype="multipart/form-data"; 4)....设定 type="file" 的表单控件,并且必须具有name属性; 6). 为了上传成功,必须保证上传文件的大小是否超标、文件类型是否符合要求,上传后存放的路径是否存在; 7)....2.通过$_REQUEST获取变量值,PHP页面因为不确定它是哪种传方式, 因此会根据php.ini中的配置来接收。 php.ini里可以设置,variables_order = “GPC”。...如果$_GET中也没有该,那么$_REQUEST就返回null。 三、什么是SQL注入?如何防止SQL注入? SQL注入攻击是黑客对数据库进行攻击的常用手段之一。...到哪个view层。

    1K60
    领券