Angular响应式表单无法在ngFor模板循环中使用formControlName设置值
创始人
2024-10-30 07:30:22
0

在Angular中,当使用响应式表单时,在ngFor模板循环中使用formControlName设置值可能会导致问题。这是因为ngFor会创建多个实例,这些实例共享相同的formControlName,这会导致冲突。

解决这个问题的一种方法是使用formGroupName。通过使用formGroupName,我们可以创建一个嵌套的FormGroup,并在ngFor循环中为每个实例设置唯一的formGroupName。

下面是一个示例代码,演示了如何解决这个问题:

在组件类中定义表单控件和表单组:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      items: this.formBuilder.array([])
    });
  }

  addItem() {
    const item = this.formBuilder.group({
      name: '',
      value: ''
    });

    this.items.push(item);
  }

  get items() {
    return this.myForm.get('items') as FormArray;
  }
}

在模板中使用formGroupName和formControlName设置值:

在上面的示例中,我们创建了一个items数组,每个数组元素都是一个嵌套的FormGroup。在ngFor循环中,我们使用[i]来设置每个实例的唯一formGroupName。

这样,我们就可以在ngFor循环中正确地使用formControlName设置值,而不会导致冲突。

相关内容

热门资讯

透视科技!wepoker底牌透... 透视科技!wepoker底牌透视脚本app,德朴之星脚本,了解一下(有挂教程);运辅助工具,进入游戏...
透视安装!德普之星辅助器,hh... 透视安装!德普之星辅助器,hhpoker怎么开透视,一分钟教会你(有挂介绍);1、打开软件启动之后找...
透视辅助!aapoker透视软... 透视辅助!aapoker透视软件,德朴之星脚本,一分钟揭秘(有挂介绍);所有人都在同一条线上,像星星...
透视神器!wpk透视辅助方法,... 透视神器!wpk透视辅助方法,hhpoker透视方法,分享给玩家(有挂辅助挂);1、每一步都需要思考...
透视模拟器!wpk辅助器安装,... 透视模拟器!wpk辅助器安装,wepoekr底牌透视,重大通报(有挂方法)1. ai辅助创建新账号,...
透视好友房!aapoker有脚... 透视好友房!aapoker有脚本吗,aapkoer德州辅助挂下载,如何分辨真伪(有挂教程);1、首先...
透视透视!wpk辅助软件,hh... 透视透视!wpk辅助软件,hhpoker透视脚本下载,了解一下(有挂详情);一、AI软件牌型概率发牌...
透视好友!wepoker透视版... 透视好友!wepoker透视版下载,aapoker辅助工具存在吗,一分钟了解(有挂教学)1、aapo...
透视免费!智星德州菠萝透视插件... 透视免费!智星德州菠萝透视插件工具,wepoker底牌透视脚本,最新通报(有挂辅助挂);1、智星德州...
透视免费!aapoker脚本怎... 透视免费!aapoker脚本怎么用,wepoker底牌透视脚本,最新通报(有挂了解)1、进入游戏-大...