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

在Angular 2中,反应形式不使用ngModel和formArrayName更新值

在Angular 2中,如果不使用ngModel和formArrayName来更新值,可以使用反应形式(Reactive Forms)来实现。

反应形式是Angular中一种处理表单的方式,它基于响应式编程的概念,通过使用FormControl、FormGroup和FormArray等类来管理表单的状态和值。

要在Angular 2中使用反应形式来更新值,可以按照以下步骤进行操作:

  1. 导入必要的模块和类:import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
  2. 在组件中定义表单:export class YourComponent implements OnInit { myForm: FormGroup;
代码语言:txt
复制
 constructor(private formBuilder: FormBuilder) {}
代码语言:txt
复制
 ngOnInit() {
代码语言:txt
复制
   this.myForm = this.formBuilder.group({
代码语言:txt
复制
     // 定义表单控件
代码语言:txt
复制
     firstName: '',
代码语言:txt
复制
     lastName: '',
代码语言:txt
复制
     email: ''
代码语言:txt
复制
   });
代码语言:txt
复制
 }

}

代码语言:txt
复制
  1. 在模板中绑定表单控件:<form [formGroup]="myForm"> <input type="text" formControlName="firstName"> <input type="text" formControlName="lastName"> <input type="email" formControlName="email"> </form>
  2. 在组件中获取和更新表单的值:export class YourComponent implements OnInit { // ...
代码语言:txt
复制
 onSubmit() {
代码语言:txt
复制
   console.log(this.myForm.value); // 获取表单的值
代码语言:txt
复制
   // 更新表单的值
代码语言:txt
复制
   this.myForm.patchValue({
代码语言:txt
复制
     firstName: 'John',
代码语言:txt
复制
     lastName: 'Doe',
代码语言:txt
复制
     email: 'john.doe@example.com'
代码语言:txt
复制
   });
代码语言:txt
复制
 }

}

代码语言:txt
复制

通过以上步骤,你可以在Angular 2中使用反应形式来更新表单的值,而不使用ngModel和formArrayName。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种应用场景。详情请参考腾讯云云服务器
  • 腾讯云云数据库MySQL:提供高性能、可扩展的云数据库服务,适用于各种规模的应用。详情请参考腾讯云云数据库MySQL
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

而不是直接修改原来的数据模型 4.2、模板驱动表单 通过使用表单的专属指令(例如 ngModel 进行双向数据绑定)将数据一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件的模板中...使用 ngModel 进行模板绑定时,angular form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 表单中使用 ngModel...,一个 FormControl 类的实例对应于一个表单控件,使用时,通过将控件的实例赋值给属性,后续则可以通过监听这个自定义的属性来跟踪表单控件的状态 import { Component, OnInit...某些情况下,我们只是想要更新控件组中的某个控件的数据,这时需要使用 patchValue 的方式进行更新 import { Component, OnInit } from '@angular/core

18.9K20

Angular 6.x 基础教程

第三节 - 事件模板引用 Angular 中,我们可以使用 (eventName) 语法,进行事件绑定。此外,可以使用 #variableName 的语法,定义模板引用。...ngFor 指令 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...上面示例中,我们使用 [(ngModel)]="message" 语法实现数据的双向绑定。该语法也称作 Banana in the Box 语法,即香蕉盒子里 (比较形象生动,记忆该语法)。 ?...第九节 - 使用 Output 装饰器 Output 装饰器的作用是用来实现子组件将信息,通过事件的形式通知到父级组件。...第十节 - 组件样式 Angular 中,我们可以设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件的内联样式外联样式。

15.6K20

Angular InputOutput

而我们今天介绍的 Output 装饰器,是用来实现子组件将信息通过事件的形式通知到父级组件。 介绍 Output 属性装饰器前,我们先来介绍一下 EventEmitter 这个幕后英雄。...: ${event}`; } } 双向绑定 介绍双向绑定之前,我们先来说个需求:即在 CounterComponent 子组件 count 发生变化的时候,需同步更新 AppComponent...通过上面的实例,我们知道我们可以 AppComponent 父组件中监听 CounterComponent 子组件的 change 事件,然后 change 事件中更新 initialCount 的...当 Angular 解析模板时,遇到 [(modelName)] 形式的绑定语法,它会期待这个指令中会存在一个名为 modelName 的输入属性一个名为 modelNameChange 的输出属性...ngModel 使用Angular 1.x 的读者,应该很熟悉 ng-model 这个指令,我们通过它来实现数据的双向绑定。那么 Angular 中有对应的指令么 ?

2.3K50

Angular核心概念:数据绑定

:[(ngModel)]---重点 Angular核心概念:数据绑定 (1)HTML绑定:{{NG表达式}} (2)属性绑定 (3)指令绑定 (4)事件绑定() (5)双向数据绑定指令:[(ngModel...{{uname}}">直接在属性上使用 形式2:直接使用[]推荐 注意:属性绑定通常赋值为变量,如果赋值为常量(如字符串常量必须用引号括起来,如 注意:直接使用ngModel会直接报错,原因是没有导入模块...ngModel指令FormsModule模块中,使用之前必须添加 app.module.ts主模块中导入模块 import {FormsModule} from'@angular/forms'...--Angular专用事件:“模型数据改变”ngModelChange-->> 当前的用户绑定{{uname}} ts文件 改变打印控制台上 uname="dingding";

3.5K10

AngularDart4.0 指南- 表单 顶

一路上你将学习如何: 用组件模板构建一个Angular表单。 使用ngModel创建读取写入输入控制的双向数据绑定。 跟踪状态变化表单控件的有效性。...模板驱动的形式 您可以通过使用本页中描述的特定于表单的指令技术Angular模板语法中编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...p模板输入变量每次迭代中是不同的power; 您使用语法显示其名称。 与ngModel的双向数据绑定 现在运行应用程序有点令人失望。 ? 你没有看到英雄数据,因为你还没有绑定到英雄。...用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听提取。...根据控制状态给出视觉反馈 使用CSS类绑定,您可以更改表单控件的外观以反映其状态。 跟踪控制状态 Angular表单控件可以告诉您用户是否触摸了该控件,是否改变,或者该是否失效。

17.5K30

AngularDart4.0 英雄之旅-教程-03英雄编辑器

', 刷新浏览器,页面将显示标题英雄名 双大括号是Angular绑定语法。 这些插绑定将组件的标题英雄属性作为字符串显示HTML标题标签内。...“显示数据”页面中阅读有关插的更多信息。 Hero对象 英雄需要更多的属性。 将英雄从文字字符串转换为类。 创建一个具有idname属性的Hero类。...数据两个方向流动:从属性到文本框,从文本框返回到属性。 表单模板语法页面中阅读有关ngModel的更多信息。 @Component(指令:...)...模板中使用任何Angular指令之前,需要在组件的@Component注解的指令参数中列出它们。...你走过的路 保留你已构建的代码 “Tour of Heroes”应用程序使用双重大括号插(一种单向数据绑定)来显示Hero对象的应用程序标题属性。

3.2K10

AngularDart4.0 指南-体系结构概述 顶

创建,更新和销毁组件如同用户应用程序中行走。...建筑外包是你必须添加元数据到你的代码,以便Angular知道该怎么做。 数据绑定 如果没有框架,您将负责将数据推送到HTML控件中,并将用户响应转化为操作和值更新。...双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性事件绑定在一个符号中。...Dart中,唯一为true的是布尔true; 所有其他是错误的。 JavaScriptTypeScript相反,将诸如1大多数非空对象的视为true。...出于这个原因,这个应用程序的JavaScriptTypeScript版本可以使用selectedHero作为* ngIf表达式的。 Dart版本必须使用布尔运算符!=替换。

7.9K30

Angular ViewChildViewChildren

ViewChild Angular 为我们提供 ViewChild ViewChildren 装饰器来获取模板视图中匹配的元素。ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素。...,我们也需要同步更新组件类,即引入 ContentChildren 装饰器,并且 ngAfterViewInit 生命周期内更新 AuthMessageComponent 组件的 days 属性。...细心的读者可能会发现除了更新属性之外,还执行了 this.cd.detectChanges() 这句语句。...Viewchild ElementRef ViewChild 小节,我们使用 @ViewChild(AuthMessageComponent) 装饰器来获取 AuthMessageComponent...但在实际项目中,我们是推荐直接使用 DOM API 执行 DOM 操作的,我们要尽量减少应用层与渲染层之间强耦合关系,从而让我们应用能够灵活地运行在不同环境。

2.7K20

AngularDart4.0 指南- 模板语法二 顶

NgModel - 与[(ngModel)]形成元素的双向绑定 开发数据输入表单时,通常都会显示数据属性,并在用户进行更改时更新该属性。 使用NgModel指令进行双向数据绑定使得这一切变得简单。...如何从输入框中提取当前显示的文本,以便更新数据属性? 谁想每一次都看看? 该ngModel指令隐藏了自己的ngModel输入属性ngModelChange输出属性背后的这些繁重的细节。...您不需要为您编写的Angular组件添加值存取器,因为您可以将事件属性命名为适合Angular基本的双向绑定语法,并完全跳过NgModel。上面显示的sizer是这种技术的一个例子。...Angular把这条指令翻译成一个围绕宿主元素的,然后重复使用这个模板为列表中的每个英雄创建一组新的元素绑定。 “结构指令”指南中了解微语法。...想象一下,诸如a.b.c.d这样的长属性路径中的某个地方防止空Angular安全导航操作符(?.)是一种更为流畅方便的方法来防止属性路径中出现空。表达式达到第一个空时会被释放。

29.9K20

Angular学习笔记(一)

组件 组件负责控制视图,通过一些由属性方法组成的 API 与视图交互。 模板 模板以 HTML 形式存在,告诉 Angular 如何渲染组件。 元数据 元数据告诉 Angular 如何处理一个类。...生命周期 ngOnChanges() 当 Angular 重新设置数据绑定输入属性时响应。该方法接受当前上一属性的 SimpleChanges 对象。...ngOnInit() Angular 第一次显示数据绑定设置指令/组件的输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。...ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。...每个 Angular 变更检测周期中调用,ngOnChanges() ngOnInit() 之后。 ngAfterContentInit() 当把内容投影进组件之后调用。

3.3K20

Angular 从入坑到挖坑 - 组件食用指南

组件类中,通过使用 @Component 装饰器 1 用来将类声明为组件类,并为这个组件类配置一些元数据 2,以决定该组件在运行期间该如何处理、实例化使用 装饰器中存在三个基础的配置参数,用来完成组件与视图之间的关联...安全导航运算符 视图中使用的属性为 null or undefined 时,javascript angular 会引发空指针异常并中断视图的渲染过程, 从而视图会渲染失败,而使用了安全导航运算符...非空断言运算符用来告诉编译器对特定的属性不做严格的空校验,当属性为 null or undefined 时,抛错误。...管道 作用 JsonPipe 将一个转换成 json 字符串 DatePipe 根据区域设置规则格式化日期 UpperCasePipe 把文本转换成全大写形式 LowerCasePipe 把文本转换成全小写形式...五、组件的生命周期钩子函数 当 angular 创建、更新、销毁组件时都会触发组件的生命周期钩子函数,通过组件中实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges

15.8K30

浅谈Angular

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。...创建项目: 要想使用 npm 来安装 CLI,请打开终端/控制台窗口,并输入下列命令: npm install -g @angular/cli ②创建工作区初始应用:ng new 文件名 ③启动开发服务器...,即Model向View 如果要实现双向绑定,需要使用ngModel指令 语法: [(ngModel)]='' ***直接写指令,angularJS里会报错,需要人为的引入FormsModule...来控制元素的显隐 自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收从外部传入的,需要使用@Input装饰器\.... 参数订阅(RxJS) 遇到的问题:数据不会及时更新,原因:组件的ngOnInit方法只会在其被创建时走一次,如果该组件销毁,init方法不会再走,导致当前数据无法更新 解决办法

4.4K10

Angular 内容投影

介绍 content projection 之前,我们先来观察一下以下的表单。对于同一个系统来说,下面的两个表单的区别在于使用不同的标题。...答案是可以的, Angular 中引入了内容投影的概念,即通过使用 指令来实现内容投影的功能。 ?...下面我们来介绍组件内部,如何获取 投射的内容。 Angular 中提供了 ContentChild 装饰器来获取投影的元素。...为了能获取多个元素,首先我们需要更新一下 AppComponent 组件,即我们模板中新增两个 AuthRememberComponent 组件,具体如下: @Component({ selector...因此,投影内容的生命周期将被绑定到它被声明的地方,而不是显示地方。 这种行为有两个原因:期望一致性性能。什么 “期望的一致性” 意味着作为开发人员,可以基于应用程序的代码,猜测其行为。

2.6K20

Angular6自定义表单控件方式集成Editormd

曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但还是希望能做成组件形式的,之后看到一篇自定义组件的文章...(isDisabled: boolean): void; } writeValue:初始化的时候将formControl的传递给原生表单控件(即,将模型中的新写入视图或 DOM 属性中); registerOnChange...:用来获取原生表单控件的值更新时通知Angular表单控件更新的函数(即,设置当控件接收到 change 事件后,调用的函数) registerOnTouched:用来获取通知用户正在交互的函数(即,设置当控件接收到...准备工作 经过上面大致了解ControlValueAccessor,正式开始前还需要最后的准备工作: 使用npm或者yarn安装jquery npm install jquery 或者 yarn add... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑器,支持NgModel

5.2K20
领券