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

Angular Reactive Form -如何将订阅valueChanges添加到表单数组中的表单控件内的单个控件

Angular Reactive Form是Angular框架中用于构建响应式表单的一种方式。它允许开发者通过使用FormControl、FormGroup和FormArray等类来创建和管理表单控件。

在Angular Reactive Form中,可以通过订阅valueChanges来监听表单控件值的变化。当表单控件的值发生变化时,可以执行相应的操作,例如更新其他表单控件的状态、校验表单等。

如果要将订阅valueChanges添加到表单数组中的表单控件内的单个控件,可以按照以下步骤进行操作:

  1. 创建一个FormGroup对象,用于包含表单数组和其他表单控件。
  2. 创建一个FormArray对象,用于表示表单数组,并将其添加到FormGroup中。
  3. 使用FormBuilder的group方法创建一个FormGroup对象,表示表单数组中的单个控件,并将其添加到FormArray中。
  4. 使用FormArray的at方法获取表单数组中的单个控件,并订阅其valueChanges。
  5. 在订阅回调函数中,可以根据需要执行相应的操作,例如更新其他表单控件的状态、校验表单等。

下面是一个示例代码:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      controlsArray: this.formBuilder.array([
        this.formBuilder.group({
          control1: [''],
          control2: ['']
        })
      ])
    });

    const control = (this.form.get('controlsArray') as FormArray).at(0).get('control1');
    control.valueChanges.subscribe(value => {
      // 处理控件值变化的逻辑
    });
  }
}

在上述示例中,我们创建了一个FormGroup对象,其中包含一个名为controlsArray的FormArray对象。然后,我们使用FormBuilder的group方法创建了一个FormGroup对象,表示表单数组中的单个控件,并将其添加到FormArray中。最后,我们使用FormArray的at方法获取表单数组中的单个控件,并订阅其valueChanges。

需要注意的是,示例中的代码仅为演示如何将订阅valueChanges添加到表单数组中的表单控件内的单个控件,并不包含完整的表单控件的创建和使用过程。具体的表单控件创建和使用方法可以参考Angular官方文档或相关教程。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云数据库(TencentDB)。您可以通过以下链接了解更多信息:

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

相关·内容

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

一、Overview angular 入坑记录笔记第三篇,介绍 angular表单控件相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...,并添加到根模块 imports 数组 import { BrowserModule } from '@angular/platform-browser'; import { NgModule }...,然后将控件每一个控件作为属性值添加到实例 import { Component, OnInit } from '@angular/core'; // 引入 FormControl 和 FormGroup...同模板驱动表单数据有效性验证相同,在响应式表单同样可以使用原生表单验证器,在设定规则时,需要将模板控件名对应数据值第二个参数改为验证规则 在响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应...对于模板驱动表单,同样是采用自定义指令方式进行跨字段交叉验证,与单个控件验证不同,此时需要将指令添加到 form 标签上,然后使用模板引用变量来获取错误信息 import { Directive

18.9K20

(转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

FormControl 和 ControlValueAccessor 如果你之前使用过 Angular 表单,你可能会熟悉 FormControl ,Angular 官方文档将它描述为追踪单个表单控件值和有效性实体对象...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你在 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如...Angular 也为所有原生 DOM 表单元素创建了 Angular 表单控件(译者注:Angular 内置 ControlValueAccessor): Accessor Form Element...,包括上面代码 formControl 指令,都会调用 setUpControl 函数来让表单控件和DefaultValueAccessor 实现交互(译者注:意思就是上面代码绑定 formControl..._isControlChanged(changes)) { setUpControl(this.form, this); 还有 setUpControl 函数源码也指出了原生表单控件Angular

3.7K20

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

响应式表单 Rx Angular 表单处理非常强大,有模版驱动表单和响应式表单两类,两种表单各有千秋,在不同场合可以分别使用,甚至混合使用,但这里就不展开了。...我们这里使用了响应式表单,也非常简单,就是一个 form 里面 3 个控件,这里我采用了官方 Material 控件,如果你觉得不爽,可以直接用基础 HTML 控件搭配样式即可。...Angular 处理响应式表单只有 3 个步骤: 1、在组件 HTML 模版给要处理控件加上 formControlName="blablabla" 2、form 标签添加 [formGroup...比如下面代码 constructor(private fb: FormBuilder) { }),用 FormBuilder 构造表单控件数组并赋值给刚才类型为 FormGroup 成员变量。...这两个数据流其实是来自于两个控件变化,而响应式表单获取值变化是非常简单就一行: 上面这行代码意思是从表单控件数组取得 formControlName 为 age 这个控件然后监听其值变化

5.2K10

Angular 6.x 表单快速入门

Angular 中有两种表单: Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 表单 ) Reactive Forms - 响应式表单 Template...Driven 表单特点 使用方便 适用于简单场景 通过 [(ngModel)] 实现数据双向绑定 自动生成 Form Model (异步) 最小化组件类代码 不易于单元测试 Reactive 表单特点...比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离到组件类 手动创建 Form Model (同步) 方便跟踪表单控件变化 易于动态添加表单控件 易于单元测试 本文主要介绍...在 Angular ,我们可以使用熟悉 标签来创建表单。...在 Angular 表单,若验证通过则会在表单控件上添加 ng-valid 类,若验证失败则会在表单控件上添加 ng-invalid 类。

4.6K20

AngularDart4.0 指南- 表单

模板驱动形式 您可以通过使用本页描述特定于表单指令和技术在Angular模板语法编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。 将该包添加到pubspec依赖项: ?...你还没有使用Angular。 没有绑定或额外指令,只是布局。 在模板驱动表单,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...要创建这样视觉反馈,您将使用Bootstrap自定义表单类 is-valid和is-invalid。 将名为name模板引用变量添加到Name 标记。...如果需要,可以将相同类型错误消息添加到,但这不是必须,因为选择框已经将权限限制为有效值。

17.4K30

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

(isDisabled: boolean): void; } writeValue:在初始化时候将formControl值传递给原生表单控件(即,将模型新值写入视图或 DOM 属性); registerOnChange...:用来获取原生表单控件值更新时通知Angular表单控件更新函数(即,设置当控件接收到 change 事件后,调用函数) registerOnTouched:用来获取通知用户正在交互函数(即,设置当控件接收到...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件 至于原生表单控件Angular表单控件能够保持一致原理,可以看下...@ViewChild('host') host; // hmtl添加 #host标识,用于选择组件模板节点 ngAfterViewInit(): void { this.init();... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.mdMarkdown编辑器,支持NgModel

5.2K20

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

前言 表单在整个系统作用相当重要,这里主要扯下响应表单实现方式。...首先需要操作表单模块引入这两个模块; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应几种状态...---- 模板驱动 模板驱动:主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单值亦或者校验 一个最简单例子...; 在Submit()函数,在点击提交时候对整个表单一一去判断,传统方式基本这样 每个控件输入时候对应去触发对应事件做校验,比如[ngModelChange]来处理双向绑定值校验 ---- 数据驱动...(Reactive Form) 响应式表表单:原理是一开始就构建整个表单表单值通过特殊指令formControlName一一关联(类似ngModel); 相关名词: FormGroup: 用来追踪表单控件有效状态及值

3.8K20

Angular 2 表单(下)

每一个 input 元素都有一个 name 属性, Angular 表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...状态 为 true 时类 为 false 时控件已经被访问过 ng-touched ng-untouched 控件值已经变化 ng-dirty ng-pristine 控件值是有效 ng-valid...*/ } 打开 index.html 文件,把以下样式链接添加到 : 修改 app/site-form.component.html...> 模板通过把 div 元素 hidden 属性绑定到 name 控件属性,我们就可以控制"name"字段错误信息可见性了。...通过 ngSubmit 来提交表单 我们可以使用 Angular 指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

1.6K10

基于 element-plus 封装一个依赖 json 动态渲染查询控件 文本数字单选组查询勾选和开关级联选择日期年、年月、年周查询日期时间查询快速查询自定义查询方案更多查询

常见级联选择是省市区县选择,组件默认给model是一个数组形式,有多少级就会有多少个数组。...年月查询 ? ? 年周查询 这里不是指星期几,而是一年第几周,听说有些企业是按照周来安排工作,所以这里也提供了周查询。 ? ? 日期时间查询 ? 快速查询 显示常用查询条件。 ?...目前有表单控件表单控件、查询子控件、查询控件,以后还会有列表控件、按钮控件等。 control-web web 控件意思。存放组件UI部分。...ctlList, // 子控件字典 resetForm, // 重置表单 formControl, // 获取表单dom getCtrMeta, // 返回子控件...({}) const findTest = json.findTest // 设置查询控件属性 const findProps = reactive({}) //

2K20

angularjs 表单验证

例如当某个字段输入非法时,.ng-invlid类会被添加到这个字段上。 你可以编辑自己喜欢CSS . 你可以私有定制化这些类来实现特定场景应用....$parsers  $parsers值是一个由函数组数组,当用户同控制器进行交互,并且ngModelController$setViewValue()方法被调用时,其中函数在当用户同控制器进行交互...它和$parser流水线互不影响,用来对值进行格式化和转换,以便在绑定了这个值控件显示。  ...$dirty $dirty值和$pristine相反,可以告诉我们用户是否和控件进行过交互。 $valid $valid值可以告诉我们当前控件是否有错误。...$invalid $invalid值可以告诉我们当前控件是否存在至少一个错误,它值和$valid相反。

6.6K70

Angularjs基础(七)

AngularJS表单     AngularJS表单时输入控件集合 HTML控件     一下HTML input 元素被称为HTML 控件:         input 元素         ...novalidate 属性在应用不是必须,但是你需要在 AngularJS 表单中使用,用于重写标准 HTML5 验证。...AngularJS输入验证     AngularJS表单控件可以验证输入数据。 输入验证     AngularJS表单控件可以提供验证功能,并对用户输入非法数据惊醒警告。...$invalid">                       var app = angular.module('myApp',[]);       ...      angular.isString() 判断给定对象是否为字符串,如果是返回true.

2K70

基于 el-form 封装一个依赖 json 动态渲染表单控件 定义接口,统一规范封装各种表单控件定义属性定义内部model实现多行多列和布局调整实现扩展实现数据联动实现组件联动

nf-form 表单控件功能 基于 el-form 封装了一个表单控件,包括表单控件。 既然要封装,那么就要完善一些,把能想到功能都要实现出来,不想留遗憾。...调整布局 看上面的图片,可以发现个问题,改变列数之后,表单页面变得不好看了,这时候需要我们做一些调整,比如让某个组件占用两份空间,调整一下组件先后顺序。 【单列合并】 ?...=> { // 确定一个组件占用几个格子 const formColSpan = reactive({}) // 表单控件属性 const formItemProps = props.itemMeta...然后判断是不是单列,单列要处理多个组件占用一个位置需求,多列要处理一个组件占用多个位置需求。 实现扩展 表单控件可以多种多样,无法完全封装进入表单控件,那么就需要表单控件支持子控件扩展。...分为两个部分,一个是表单控件自己需要属性,另一个是表单控件需要属性,还有验证规则等。

1.5K30

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,在响应式表单,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName...)]来将表单数据和和视图进行双向绑定,NgForm 指令为 form 增补了一些额外特性。...总结 响应式表单是动态,模板驱动表单是固定 2.响应式表单使用 注册ReactiveFormsModule 组件导入FormControl 模板中注册组件 控件值(获取setvalue

2.8K50

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券