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

angular2 rc6 -如何在事件上更改reactive FormControl值

在Angular 2 RC6中,要在事件上更改响应式FormControl的值,可以按照以下步骤进行操作:

  1. 首先,确保你已经导入了FormControl和FormGroup类,以及ReactiveFormsModule模块。在组件的顶部添加以下导入语句:
代码语言:txt
复制
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
  1. 在组件类中创建一个FormGroup对象,并在其中定义一个FormControl对象。例如:
代码语言:txt
复制
myForm: FormGroup;
myControl: FormControl;

constructor() {
  this.myControl = new FormControl();
  this.myForm = new FormGroup({
    myControl: this.myControl
  });
}
  1. 在模板中,将FormControl绑定到一个表单元素的value属性上,以便显示和修改其值。例如:
代码语言:txt
复制
<input type="text" [formControl]="myControl">
  1. 现在,你可以在事件处理程序中更改FormControl的值。例如,假设你有一个按钮,点击该按钮将FormControl的值更改为"Hello World"。你可以在组件类中添加一个事件处理程序方法,并在其中使用setValue方法更改FormControl的值。例如:
代码语言:txt
复制
changeValue() {
  this.myControl.setValue("Hello World");
}
  1. 在模板中,将该事件处理程序绑定到按钮的点击事件上。例如:
代码语言:txt
复制
<button (click)="changeValue()">Change Value</button>

这样,当点击按钮时,FormControl的值将被更改为"Hello World"。

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

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单的提交按钮...} 当在组件中创建好控件实例后,通过给视图模板的表单控件添加 formControl 属性绑定,从而将控件实例与模板中的表单控件关联起来 <div class="form-group...通过使用 <em>FormControl</em> 控件的 value 属性,可以获得当前表单控件的一份数据<em>值</em>拷贝,通过 setValue 方法则可以更新表单的控件<em>值</em> import { Component, OnInit...在模板驱动表单中,因为不是直接使用的 <em>FormControl</em> 实例,因此这里应该在模板<em>上</em>添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20
  • 当nz-checkbox-group多选框组遇上必选校验

    当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件的多选框nz-checkbox-group...打了一下发现还真有一个this.getFormControl('one').setErrors()的方法,于是在上面的基础想到这样一个方式: if(this.validateForm.value.scopes.length...在刷了n+1遍ng-zorro-antd的官方文档的表单部分后,在“自定义异步校验”中看到这样一句话 : 当使用 响应式表单(Reactive Form) 时, 的...pending) | warning | success状态,具体使用方式建议参照本demo ----- NG-ZORRO表单一节的文档 本着死马当活马医的心点开里面的dome,仔细看了下,同时在实例试了一下...onesValidator= (control: FormControl): { [s: string]: boolean } => { this.selectedOne = [];

    4.4K20

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

    一部分事件适用于组件/指令,而少数事件只适用于组件。 ngOnChanges:当Angular设置其接收当前和上一个对象的数据绑定属性时响应。...每次更改检测运行时,会被调用。 ngOnDestroy:在Angular销毁指令/组件之前清除。取消订阅可观察的对象并脱离事件处理程序,以避免内存泄漏。...什么是事件发射器?它是如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...在Angular2中,组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...这通常用在setter中,当类中的更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。

    17.3K80

    新的 Signals 提案旨在将 JavaScript 中的响应式编程原语形式化

    响应式应用程序本质需要:一个与外部系统交互的接口,用于接收输入事件和发送操作动作;计算对输入事件的响应;以及将相应的操作动作发送到匹配的外部系统(例如,屏幕显示、远程数据库)。...许多用于实现用户界面的框架( Angular2、Vue、React 等)更倾向于使用回调过程或事件处理程序,它们作为事件的结果,直接执行相应的响应。...因此,一些 UI 框架要求开发人员使用特定的原语和语法(Svelte 中的 $ ;Vue 中的 ref 、 reactive 和 computed )来声明这些关系。...响应式编程通过提供抽象来表达时变(time-varying values)并自动管理这些之间的依赖关系,从而促进了事件驱动的响应式应用程序的开发。...人们提出了许多跨各种语言( Haskell、Scheme、JavaScript、Java、.NET 等)的方法。

    10011

    实战 | Change Detection And Batch Update

    我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...实际是Angular1帮我们调用了,我们看下ng事件的源码实现: 很明显调用了$scope.$apply,我们再看下$timeout的源码: 最后也调用了$rootScope....因为我们没有用Angular1提供的事件系统,所以Angular1没法自动帮我们调用$apply,这里我们只能手动调用$apply进行脏检测了。...Angular2 当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏检测有点像,但是Angular2...由于事件系统用的Vue提供的,是可控的,我们再看下定时器下执行的情况: 打开控制台,点击按钮会发现依旧打印了0 0,有人可能就疑惑了Vue是不是跟Angular2一样也修改了异步方法的原生实现呢?

    3.2K20

    前端人员该怎么面试 经典Angular面试题有哪些

    当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...#FormatImgID_0# 2、事件发射器如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...在Angular2中,组件中发生的任何改变总是从当前组件传播到其所有子组件中。如果一个子组件的更改需要反映到其父组件的层次结构中,我们可以通过使用事件发射器api来发出事件。...因为shadow DOM本质是静态的,同时也是开发人员无法访问的,所以它是一个很好的候选对象。因为它缓存的DOM将在浏览器中呈现得更快,并提供更好的性能。...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    4.1K80

    Angular2 VS Angular4 深度对比:特性、性能

    在这些浏览器构建应用,意味着可以更容易的使用Angular进行开发和优化,从而允许开发人员更专注于公司业务实现的代码。...Angular2解决了这个问题,另外还添加了一些缺少的功能,子注入以及生命周期/范围控制。 注解: AtScript提供了连接元数据和功能的工具。...由于代码依赖于ES6模块,因此模块加载程序将通过在部分组件引用它们,来加载依赖关系。...激活:它会响应导航到新控件的成功事件。 canDeactivate:它将防止或允许跳出旧控制器的导航。 停用:它会响应跳出旧控制器的成功事件。...改进 *ngIf 和 *ngFor: 模板绑定语法目前支持一些少量有帮助的更改。现在,开发人员已经可以使用if/else设计​​语法,并分配局部变量了。

    8.7K20

    Change Detection And Batch Update

    我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...$apply()进行脏检测的,核心代码如下 遍历所有scope的$$watchers,通过get获取到最新同last比较,变化了则通过调用fn更新DOM。...实际是Angular1帮我们调用了,我们看下ng事件的源码实现 forEach( 'click dblclick mousedown mouseup mouseover mouseout mousemove...如果我们不使用Angular1提供的事件系统、定时器和$http,如在jQuery事件中进行数据更新时,我们需要手动调用$apply。 Angular2 ?...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏检测有点像,但是Angular2的更新没有副作用

    3.3K40

    Change Detection And Batch Update

    我们别急着下结论,我们知道应用程序状态的改变主要是下面三种情况引起的: Events - 点击按钮 Timers - setTimeout XHR - 从服务器获取数据 我们才测试了事件这一种情景,...$apply()进行脏检测的,核心代码如下 ? 遍历所有scope的$$watchers,通过get获取到最新同last比较,变化了则通过调用fn更新DOM。...实际是Angular1帮我们调用了,我们看下ng事件的源码实现 forEach( 'click dblclick mousedown mouseup mouseover mouseout mousemove...如果我们不使用Angular1提供的事件系统、定时器和$http,如在jQuery事件中进行数据更新时,我们需要手动调用$apply。 Angular2 ?...当数据变化时,Angular2从根节点往下遍历进行更新,默认Angular2深度遍历数据,进行新老数据的比较来决定是否更新UI,这点和Angular1的脏检测有点像,但是Angular2的更新没有副作用

    3.7K70

    Vuejs和其他前端框架的对比

    React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。...也有一些配套框架被设计为管理一个大的state对象,Redux。...这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。 对标准向后兼容Angular2在一些细节对标准有更好的支持。...比如,它的组件系统缺少完备的生命周期事件方法,尽管这些在现在是非常常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。 如果你有兴趣研究,你还会发现二者在接口设计的理念是不同的。...例如,在 Polymer 中唯一支持的表达式只有布尔否定和单一的方法调用,它的 computed 方法的实现也并不是很灵活。

    3.8K110

    开始使用Vue 3时应避免的10个错误

    现在的一般规则是: 使用 reactive 代替 Object, Array, Map, Set 使用 ref 代替 String, Number, Boolean 对于原始使用响应式会导致警告,并且该不会被设置为响应式...例如,使用 ref 声明 Array 将在内部调用 reactive 。 2.解构失去响应式 让我们想象一下,有一个具有计数器和一个按钮以增加计数器的响应式对象。...这是使用 reactive helper 的限制之一。 3.对".value"属性感到困惑 使用 ref 的怪癖之一可能很难适应。Ref 接受一个并返回一个响应式对象。...只需要添加一个自定义监听器来监听事件即可。 this....使用错误的生命周期事件。 所有组件生命周期事件都被重命名,要么通过添加 on 前缀,要么完全更改名称。可以在以下图形中检查所有更改。 10.

    29020

    vue.js与其他前端框架的对比

    React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。...也有一些配套框架被设计为管理一个大的state对象,Redux。...这一点Angular2有原生的service injection pattern。而Vue则没有官方推荐。 对标准向后兼容Angular2在一些细节对标准有更好的支持。...比如,它的组件系统缺少完备的生命周期事件方法,尽管这些在现在是非常常见的。以及相比于 Vue 调用子组件的接口它的方法显得有点笨重。 如果你有兴趣研究,你还会发现二者在接口设计的理念是不同的。...例如,在 Polymer 中唯一支持的表达式只有布尔否定和单一的方法调用,它的 computed 方法的实现也并不是很灵活。

    4.2K80

    【译】Vue 3 Composition API: Ref vs Reactive

    我最近在Vue 3做了几场演讲,并且不断出现的一个问题是何时使用Ref vs Reactive来声明数据的响应式。...Vue 2 中的响应式 为了给本文提供一些背景信息,我想快速探索如何在Vue 2应用程序中创建响应式性数据。当您希望Vue跟踪数据更改时,需要在从data函数返回的对象内部声明该属性。...ref对象具有指向内部的单个属性.value。这意味着,如果要访问或更改,则需要使用title.value。并且因为这是一个不会改变的对象,所以我决定将其声明为const。...Reactive 当您要在原始定义响应式数据时,我们仅查看了使用ref()的一些示例,如果要创建响应式对象(引用类型)会怎样?...感谢您的阅读,我一既往的朋友...

    1.9K31

    Vue2向Vue3过渡,持续记录

    自定义 property 会通过内联样式的方式应用到组件的根元素,并且在源变更的时候响应式更新。...问题总结 1.直接在浏览器内通过script引入Vue3,需要注意以下几点 setup选项内,不能像在Cli内一样使用Vue的APi(ref、reactive等),需要使用 Vue.ref 的形式才能调用...对象是通过axios从后端请求过来的,后赋值到reactive对象的属性(注意:此后这个数据对象、watch返回的new、old都是这个对象的引用)。...官方文档:https://v3.cn.vuejs.org/guide/migration/v-model.html#%E6%A6%82%E8%A7%88 用于自定义组件时,v-model prop 和事件默认名称已更改...可以通过给 v-model 指定一个参数来更改这些名字 ,v-model:value; 同时可以绑定多个v-model: <UserName v-model:first-name="first"

    5.9K40
    领券