【问题标题】:Ag Grid and Reactive formsAg Grid 和反应形式
【发布时间】:2019-03-18 13:29:21
【问题描述】:

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

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

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

您使用哪种策略来检测具有反应形式和角度网格的组件的更改并在后端发送数据?我敢肯定,有一个简单的方法。

更新:

我想从后端加载模型(数据)并将模型绑定到响应式表单。

来自后端的原始模型:

{
"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 之类的更新模型。它直接返回绑定到表单的模型。我希望网格的行也包含在我调用 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'},
]
}

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

【问题讨论】:

  • 除了布局之外,网格与任何形式的表格有什么关系?
  • 我想提取模型的数据并将其发送到后端。模型的一部分加载到 from 中,另一部分加载到网格中。我想从网格和表单中提取数据。我可以将数据集中在一个步骤中,而不是从网格中提取一部分,另一部分从表单中提取吗?
  • 解释你想要达到的目标,因为目前的解释有点奇怪。
  • 我想从后端加载模型(数据)并将模型绑定到响应式表单。用户进行更改,当用户保存更改时,我想采用更新的模型,如this.myForm.value。它直接返回绑定到表单的模型。我希望网格的行也包含在我调用this.myForm.value 时返回的绑定模型中。在这种情况下你在做什么?这是一个非常典型的案例......

标签: angular ag-grid angular-reactive-forms


【解决方案1】:

根据您的问题,您的实现似乎符合选项 3,如 Ag 网格框架专家本人编写的出色 example 中所述。

它基本上包括

  • 创建动态响应式表单控件并将其绑定到网格(使用 表单数组)

  • 监听行数据变化和刷新表单控件同时清除旧表单控件

【讨论】:

  • 文章中的解决方案不起作用我们使网格列可编辑。
猜你喜欢
  • 2019-11-17
  • 2017-04-11
  • 2018-04-02
  • 2019-11-15
  • 2020-12-09
  • 2018-02-20
  • 1970-01-01
  • 2020-03-30
  • 2022-08-04
相关资源
最近更新 更多