Ag Grid and Reactive forms

Question

I have a component it uses a reactive form and an angular grid. I am loading data in the form and in the grid. The data is editable and the user can click a button save and store it.

Unfortunately the form knows nothing about the data of the grid. If the form would know the data of the grid I could get the whole data by this.myFormGroup.value and I could known if there are changes by this.myForm.valueChanges (in the form and in the grid).

I am doing that to get the form data and to know if the form data has changes. But separately I am getting the data of the grid via forEachNode and the events cellValueChanged + rowDataUpdated.

Which strategy are you using to detect changes on components with reactive forms and angular grid and to send the data in backend? I am sure, there is a straightforward way.

Update:

I want to load a model (data) from backend and bind the model to a reactive form.

Original model from backend:

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

The user makes changes and when the user saves the changes I want to take the updated model like this.myForm.value. It returns directly my model bound to the form. I would like that the rows of the grid are also included in the bound model returned when I am calling this.myForm.value.

Model updated:

{
"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'},
]
}

How do you build the updated model that will be send to the Server?

What does grid has to do with any kind of form besides layout? — Antoniossss
I want to extract the data of my model and send it to backend. A part of the model is loaded in a from and the other part loaded in a grid. I want to extract data from the grid and from the form. Can I keep the data central and extract it in one step and not a part from the grid and the other from the form? — MrScf
Explain what you wanna to achieve cuz current explanations is little bit weird. — un.spike
I want to load a model (data) from backend and bind the model to a reactive form. The user makes changes and when the user saves the changes I want to take the updated model like this.myForm.value. It returns directly my model bound to the form. I would like that the rows of the grid are also included in the bound model returned when I am calling this.myForm.value. What are you doing in this case? It is a very typical case.... — MrScf

Pratik Bhat Pratik Bhat · Accepted Answer · 2018-10-17T05:10:44

Based on your question, it seems your implementation fits into option 3 as described in this excellent example written by Ag grid framework expert himself.

It basically comprises of

creating dynamic reactive form controls and binding it to grid (using Form Array)
listening to row data changes and refreshing form controls also clearing out old form controls

Ag Grid and Reactive forms

1 Answers