angular icon indicating copy to clipboard operation
angular copied to clipboard

[BUG] Select Component breaks when Value Property is set to Entire Object

Open Mimisss opened this issue 3 years ago • 0 comments

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

  1. Follow and complete the Application Development Guide.

  2. Edit register.module.ts to remove event from parents:

     parents: [        
      {
        field: 'user',
        resource: 'currentUser',
        filter: false
      }
    ]
    
  3. Edit the Registration Form to set the Value Property and Item Template of the Event select component as follows: Value Property: {Entire Object} Item Template: <span>{{ item.data.title }}</span>

  4. Navigate to the "New Registration" page. Click the Event select 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.

  5. 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

  1. The Event select component should display item.data.title as options based on the configured Item Template.

  2. The Event select component should save the event object in proper json format:

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

Observed behavior

  1. The Event select component displays the entire object contents:

broken_select_component_with_data_value_set_to_entire_object

  1. The Event select component saves the object as serialized json:

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

Example

broken_select_component_with_data_value_set_to_entire_object

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

Mimisss avatar Sep 29 '22 09:09 Mimisss