Question

我想像这样基于json创建动态formGroup：

  const LIMITS: Limit[] = [
  {
    id: 'limit1',
    value: 1000,
    disabled: false
  },
  {
    id: 'limit2',
    value: 500,
    disabled: true
  },
  {
    id: 'limit3',
    value: 5000,
    disabled: true
  }
]

在this响应中使用formArray可以很好地工作，但是我将丢失id信息，我需要这些信息来匹配已编辑的值。有没有办法使用我的自定义formControlName名称生成动态表单？ Here是基于this响应的堆叠闪电战。

编辑

我对FormGroup w使用了方法，但是在初始化时会出现错误

Error: Cannot find control with path: 'limits -> limit1'
Error: Cannot find control with path: 'limits -> limit2'
Error: Cannot find control with path: 'limits -> limit3'

我知道当输入请参阅this stackblitz示例。

编辑

我找到了解决方案，方法是定义limits，然后在数据订阅中使用setControl。

 ngOnInit() {
    this.form = this.fb.group({
      limits: this.fb.group({})
    })

    this.limits$.subscribe((limits: Limit[]) => {
      this.form.setControl('limits', this.addLimits(limits));
    });

  }

查看可堆叠性example

Answer 1

如果要使用id字段作为键，则只需使用FormGroup代替FormArray，然后使用addControl和removeControl代替push和removeAt使您的表单保持动态。

Angular使用自定义formControlName

1 个答案: