首页
学习
活动
专区
工具
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 5,reactive form-重置所需的表单控件不会重置输入下的所需错误将表单控件放置在angular中的subscribe方法内时,表单控件无法正确初始化为angular中的对象数组声明表单控件的最佳方法如何从表单组中禁用的表单控件中获取值作为流?(如valueChanges方法)Angular Reactive Forms:如何在不知道HTML键的情况下使用组中的表单控件名称访问表单控件名称Angular 6在表单数组中动态创建的表单控件中的自定义验证Angular5中可重用的表单控件输入在组数组forms Angular中表单控件返回Null的问题如何从Angular 2中的Form.value排除表单控件值(模板驱动自)如何从angular中的动态生成中获取表单控件值Angular Reactive Forms:是否可以创建包含“必须包含”验证的自定义表单控件组件?如何在angular form中实现我想要通过子组件动态呈现表单控件的功能?在一个表单数组控件和另一个表单控件之间的切换在angular中不起作用?Angular5 Reactive Forms:另一个表单数组中的表单数组将表单控件类添加到MCV中动态创建的Textbox如何在Angular 6中为反应式表单中表单组的嵌套表单控件设置验证器我想在我的表单中重置进度/angular-kendo-editor控件如何在角度反应式表单中为表单数组的每个表单控件设置Id或名称如何将WPF表单添加到选项卡控件的选项卡项中如何在angular中对多个下拉列表使用相同的表单控件名称
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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.8K20
  • 理论 | 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.3K10

    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.5K30

    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.7K10

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

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

    2.1K20

    angularjs 表单验证

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

    6.7K70

    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.6K30

    一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    哈希#form是一个模板引用变量,我们可以用它来访问我们代码表单。...使用模板驱动表单与以前使用简单HTML表单完全相同。如果我们需要更复杂东西,那么在Angular中有一种不同形式:反应式。我们将介绍转换表单后他们反应。...想想像这样:我们刚刚实现了在我们表单发生变化时调用代码。如果我们用承诺处理用户更改,则只有第一个用户更改会在我们需要重新订阅之前处理。...- 它将单个值或数组可观察价值)。...如果我们About在应用程序需要一个页面会怎么样 我们如何将添加到我们当前代码库?显然,该页面应该是一个组件(与Angular其他内容一样)。我们来生成这个组件。

    42.6K10

    Angular系列教程-第四节

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

    2.8K50
    领券