Question

我有一个数组，其中包含可编辑（将是formControl对象）和只读数据（将是HTML上的静态文本）的组合。有没有办法在Angular中做到这一点？我也可以使用FormArrays和FormGroups添加此静态文本，但感觉不对。让我用一个例子详细说明问题：

说，我有一个JSON对象如下：

itemArray = [{
  title: 'fancy item', // not a member of the form (read-only)
  quantity: 0 // member of the form (editable)
},
{
  title: 'weird item', // not a member of the form (read-only)
  quantity: 1 // member of the form (editabe)
}
]

我将FormArrays用于项目的quantity字段。

this.formItems = new FormArray([
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
          title: new FormControl('Fancy item') // Readonly text for form group. What's the best way to add a enrichment data for a form group?
        }
      ),
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
          title: new FormControl('Weird item') // Readonly text for form group. What's the best way to add a enrichment data for a form group?
        }
      )
    ]
);

但是，标题不是可编辑的项目。将附加数据添加到FormGroup的最佳方式是什么？

否则，我必须创建另一个名为items的独立数组来管理这些额外的和不可编辑的数据。因此，我可以将项目的字段拆分为两个单独的对象。 1）staticDataForItems，2）editableDataForItems。

this.staticDataForItems = [{
    title: 'Weird item',
  }
];

this.editableDataForItems = new FormArray([
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
        }
      ),
      new FormGroup(
        {
          quantity: new FormControl(1, Validators.required),
        }
      )
    ]
);

这是我不喜欢的解决方案。因为，在我的用例中，我可以向数组中添加项目或删除＆＃34; items＆＃34;从阵列。我不想处理2个不能面向未来的数组（项目和formArray）。

如果我有只读（只读HTML元素）和可编辑数据（输入HTML元素）数据的组合，我该如何将这两个数组合并为一个单个数组。

我希望从表单验证中受益，并且我希望以一种好的方式添加其他数据。

您可以在下面找到一个工作示例：

https://stackblitz.com/edit/angular-gw1c6d?file=app%2Fapp.component.ts

感谢。

Answer 1

我只是像这样在Submit函数中传递静态值：

`<form [formGroup]="prodForm" (ngSubmit)="onAddToCart(
    product._id, 
    product.title, 
    product.price, 
    product.sale,
    prodForm.value)">`

然后prodForm.value包含控件的大小，颜色和数量。

如何将其他数据传递给Angular中的反应式动态表单

1 个答案: