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中的单个控件中,并在控件的值发生变化时执行相应的操作。

相关内容

热门资讯

黑科技脚本!wepoke辅助,... 黑科技脚本!wepoke辅助,微扑克系统发牌规律,总结教程(有挂透明)-哔哩哔哩微扑克系统发牌规律辅...
黑科技ai代打!wpk德州ai... 黑科技ai代打!wpk德州ai辅助神器,微扑克ai辅助器苹果版,专业教程(有挂教学)-哔哩哔哩,您好...
黑科技透明挂!德州之星app有... 自定义德州之星app有漏洞吗系统规律,只需要输入自己想要的开挂功能,一键便可以生成出微扑克专用辅助器...
黑科技ai辅助!德扑ai助手,... 黑科技ai辅助!德扑ai助手,德州ai辅助软件排名,力荐教程(有挂教程)-哔哩哔哩是一款可以让一直输...
黑科技辅助!wepoke透视该... 黑科技辅助!wepoke透视该购买渠道,wpk透视外挂会怎么样,解说技巧(有挂方法)-哔哩哔哩;无聊...
黑科技机器人!德扑ai智能机器... 黑科技机器人!德扑ai智能机器人,德州ai辅助外挂,解密教程(有挂透明)-哔哩哔哩;人气非常高,ai...
黑科技ai!wepoke辅助挂... 一、wepoke辅助真的假的简介了解软件请加微:136704302wepoke辅助真的假的是一款在线...
黑科技神器!德州免费辅助神器a... 黑科技神器!德州免费辅助神器app,德州ai辅助软件排名,透视教程(有挂方法)-哔哩哔哩1)德州免费...
黑科技ai辅助!德州之星有辅助... 黑科技ai辅助!德州之星有辅助挂,红龙扑克发牌有问题,曝光教程(有挂了解)-哔哩哔哩,您好,红龙扑克...
黑科技机器人!wepoke真的... 黑科技机器人!wepoke真的有挂,德州之星有没有假,力荐教程(有挂方法)-哔哩哔哩;小薇(透视辅助...