[BUG] Select Component breaks when Value Property is set to Entire Object
Environment
Please provide as many details as you can:
- Hosting type
- [x] Form.io
- Formio.js version: 4.14.8
- Frontend framework: Angular 14.0.0
- Browser: Google Chrome
- Browser version: 105.0.5195.127 (Official Build) (64-bit)
Steps to Reproduce
-
Follow and complete the Application Development Guide.
-
Edit
register.module.tsto removeeventfromparents:parents: [ { field: 'user', resource: 'currentUser', filter: false } ] -
Edit the
Registration Formto set theValue PropertyandItem Templateof theEventselect component as follows: Value Property:{Entire Object}Item Template:<span>{{ item.data.title }}</span> -
Navigate to the "New Registration" page. Click the
Eventselect and pick an option. See how the select component is broken when the data value property is set to "Entire Object" (see example screenshot below). Make a submission. -
In the formio project, select the registration submission from the Data tab and click Export JSON. See how the event object is wrongfully saved as serialized json:
"data": { "event": "{\"title\":\"Super Bowl Party\",\"description\":\"\",\"date\":\"2022-09-29T09:00:00.000Z\",\"submit\":true}",
Expected behavior
-
The
Eventselect component should displayitem.data.titleas options based on the configured Item Template. -
The
Eventselect component should save theeventobject in proper json format:"event": { "data": { "title": "Super Bowl Party", "description": "", "date": "2022-09-29T09:00:00.000Z", "submit": true } },
Observed behavior
- The
Eventselect component displays the entire object contents:

-
The
Eventselect component saves the object as serialized json:"data": { "event": "{\"title\":\"Super Bowl Party\",\"description\":\"\",\"date\":\"2022-09-29T09:00:00.000Z\",\"submit\":true}",
Example

"data": {
"event": "{\"title\":\"Super Bowl Party\",\"description\":\"\",\"date\":\"2022-09-29T09:00:00.000Z\",\"submit\":true}",