Angular响应式表单 - 如何将valueChanges订阅添加到Form Array中的单个控件中
创始人
2024-10-30 05:30:18
0

要将valueChanges订阅添加到Form Array中的单个控件中,您可以按照以下步骤进行操作:

  1. 首先,在组件的初始化中创建一个Form Builder实例,并定义一个Form Array:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      controlArray: this.formBuilder.array([])
    });
  }
}
  1. 然后,您可以使用Form Array的push方法向其添加控件:
addControl() {
  const controlArray = this.myForm.get('controlArray') as FormArray;
  controlArray.push(this.formBuilder.control(''));
}
  1. 接下来,您可以使用Form Array的at方法获取单个控件,并订阅其valueChanges事件:
subscribeToValueChanges(index: number) {
  const controlArray = this.myForm.get('controlArray') as FormArray;
  const control = controlArray.at(index);

  control.valueChanges.subscribe(value => {
    // 在这里处理控件值的变化
    console.log(value);
  });
}
  1. 最后,在模板中,您可以使用ngFor来迭代Form Array中的控件,并将订阅函数添加到每个控件:

通过遵循以上步骤,您将能够将valueChanges订阅添加到Form Array中的单个控件中,并在控件的值发生变化时执行相应的操作。

相关内容

热门资讯

透明新版!兴动互娱工具名称,w... 透明新版!兴动互娱工具名称,wpk真吗(辅助挂)详细开挂辅助挂;无需打开直接搜索薇:13670430...
如何分辨真伪!小闲川南宜宾辅助... 如何分辨真伪!小闲川南宜宾辅助,山西扣点点脚本辅助器(讲解有挂辅助下载);无需打开直接搜索微信(13...
透视模拟器!麻友圈安庆版插件,... 透视模拟器!麻友圈安庆版插件,hhpoker为什么一直输(辅助挂)详细开挂辅助挂 了解更多开挂安装加...
必看攻略!陕西挖坑辅助,中至抚... 大家好,今天小编来为大家解答中至抚州数刀辅助器这个问题咨询软件客服可以免费测试直接加微信(13670...
透视模拟器!新道游房卡辅助器,... 透视模拟器!新道游房卡辅助器,wepoker买钻石有用吗(辅助挂)详细开挂辅助挂;无需打开直接搜索微...
推荐几款新版!掌乐宝修改器,八... 推荐几款新版!掌乐宝修改器,八闽掌上辅助软件(有挂技巧开挂辅助平台)1、下载安装好八闽掌上辅助软件,...
透明教程!海豹3+1辅助器,w... 透明教程!海豹3+1辅助器,wepoker有没有挂(辅助挂)详细开挂辅助器这是一款可以让一直输的玩家...
一分钟揭秘!胡乐辅助脚本可靠吗... 一分钟揭秘!胡乐辅助脚本可靠吗,途游手游辅助(真实有挂辅助安装) 了解更多开挂安装加(1367043...
透视最新!中至上饶神辅助,we... 透视最新!中至上饶神辅助,wepokerplus外挂(辅助挂)详细开挂辅助插件;打开点击测试直接进入...
分享一款!益乐绍兴辅助,四川熊... 大家好,今天小编来为大家解答四川熊猫辅助软件这个问题咨询软件客服可以免费测试直接加微信(136704...