Ag 网格和反应形式

Question

我有一个使用 reactive form 和 angular grid 的组件。我正在表格和网格中加载数据。数据是可编辑的，用户可以单击按钮保存并存储它。

不幸的是，表单对网格的数据一无所知。如果表格知道网格的数据，我可以通过 this.myFormGroup.value 获取整个数据，并且我可以通过 this.myForm.valueChanges 知道是否有变化（在表格和网格中）。

我这样做是为了获取表单数据并了解表单数据是否发生了变化。但是我分别通过 forEachNode 和事件 cellValueChanged + rowDataUpdated.

获取网格数据

您使用哪种策略来检测具有反应形式和 angular 网格的组件的变化并在后端发送数据？我敢肯定，有一个简单的方法。

更新：

我想从后端加载模型（数据）并将模型绑定到反应式表单。

来自后端的原始模型：

{
"firstName":"Paul",
"lastName":"Smith",
"address":{
"street":"228 Park Ave S",
"city":"New York",
"state":"USA",
"zip":"10003"
},
"gridData":[{'empId': 'A1', 'empName': 'A', 'skill': 'A'}]
}

用户进行更改，当用户保存更改时，我想采用更新后的模型，如 this.myForm.value。它 returns 直接将我的模型绑定到表单。我希望网格的行也包含在我调用 this.myForm.value 时返回的绑定模型中。

模型已更新：

{
"firstName":"John",
"lastName":"Smith",
"address":{
"street":"18 Green Aloyse S",
"city":"New York",
"state":"USA",
"zip":"2222"
},
"gridData":[{'empId': 'A1', 'empName': 'A', 'skill': 'A'},
 {'empId': 'A1', 'empName': 'A', 'skill': 'A'},
 {'empId': 'B1', 'empName': 'B', 'skill': 'B'},
 {'empId': 'C1', 'empName': 'C', 'skill': 'C'},
]
}

如何构建将发送到服务器的更新模型？

Answer 1

根据您的问题，您的实现似乎符合选项 3，如 Ag 网格框架专家本人撰写的这篇优秀 example 中所述。

它主要包括

创建动态反应式表单控件并将其绑定到网格（使用表格数组)
侦听行数据更改和刷新表单控件同时清除旧表单控件

Ag 网格和反应形式

Ag Grid and Reactive forms

ag-grid

angular

angular-reactive-forms