FIO-8074 Added Storage Type to Radio Components

src/components/radio/Radio.js

@@ -193,7 +193,8 @@ export default class RadioComponent extends ListComponent {
         }
 
         if (this.isSelectURL && _.isObject(this.loadedOptions[index].value)) {
-          input.checked = _.isEqual(this.loadedOptions[index].value, this.dataValue);
+          const optionValue = this.component.dataType === 'string' ? JSON.stringify(this.loadedOptions[index].value) : this.loadedOptions[index].value;
+          input.checked = _.isEqual(optionValue, this.dataValue);
         }
         else {
           input.checked = (dataValue === input.value && (input.value || this.component.dataSrc !== 'url'));
@@ -420,21 +421,39 @@ export default class RadioComponent extends ListComponent {
    * @return {*}
    */
   normalizeValue(value) {
+    const dataType = this.component.dataType || 'auto';
     if (value === this.emptyValue) {
       return value;
     }
 
-    const isEquivalent = _.toString(value) === Number(value).toString();
+    switch (dataType) {
+      case 'auto':
 
-    if (!isNaN(parseFloat(value)) && isFinite(value) && isEquivalent) {
-      value = +value;
-    }
-    if (value === 'true') {
-      value = true;
-    }
-    if (value === 'false') {
-      value = false;
-    }
+        if (!isNaN(parseFloat(value)) && isFinite(value) && _.toString(value) === Number(value).toString()) {
+          value = +value;
+        }
+        if (value === 'true') {
+          value = true;
+        }
+        if (value === 'false') {
+          value = false;
+        }
+        break;
+      case 'number':
+        value = +value;
+        break;
+      case 'string':
+        if (typeof value === 'object') {
+          value = JSON.stringify(value);
+        }
+        else {
+          value = String(value);
+        }
+        break;
+      case 'boolean':
+        value = !(!value || value.toString() === 'false');
+        break;
+      }
 
     if (this.isSelectURL && this.templateData && this.templateData[value]) {
       const submission = this.root.submission;

src/components/radio/Radio.unit.js

@@ -14,7 +14,8 @@ import {
   comp7,
   comp8,
   comp9,
-  comp10
+  comp10,
+  comp11
 } from './fixtures';
 
 describe('Radio Component', () => {
@@ -114,6 +115,38 @@ describe('Radio Component', () => {
     });
   });
 
+  it('Should set the Value according to Storage Type', (done) => {
+    const form = _.cloneDeep(comp11);
+    const element = document.createElement('div');
+
+    Formio.createForm(element, form).then(form => {
+      const radioNumber = form.getComponent('radioNumber');
+      const radioString = form.getComponent('radioString');
+      const radioBoolean = form.getComponent('radioBoolean');
+      const value1 = '0';
+      const value2 = 'true';
+      radioNumber.setValue(value1);
+      radioString.setValue(value1);
+      radioBoolean.setValue(value2);
+
+      const submit = form.getComponent('submit');
+      const clickEvent = new Event('click');
+      const submitBtn = submit.refs.button;
+      submitBtn.dispatchEvent(clickEvent);
+
+      setTimeout(() => {
+        assert.equal(form.submission.data.radioNumber, 0);
+        assert.equal(typeof form.submission.data.radioNumber, 'number');
+        assert.equal(form.submission.data.radioString, '0');
+        assert.equal(typeof form.submission.data.radioString, 'string');
+        assert.equal(form.submission.data.radioBoolean, true);
+        assert.equal(typeof form.submission.data.radioBoolean, 'boolean');
+        document.innerHTML = '';
+        done();
+      }, 300);
+    }).catch(done);
+  });
+
   it('Should set correct data for 0s values', (done) => {
     Harness.testCreate(RadioComponent, comp10).then((component) => {
       component.setValue('01');

src/components/radio/editForm/Radio.edit.data.js

@@ -75,6 +75,26 @@ export default [
       json: { '===': [{ var: 'data.dataSrc' }, 'values'] },
     },
   },
+  {
+    type: 'select',
+    input: true,
+    label: 'Storage Type',
+    key: 'dataType',
+    clearOnHide: true,
+    tooltip: 'The type to store the data. If you select something other than autotype, it will force it to that type.',
+    weight: 12,
+    template: '<span>{{ item.label }}</span>',
+    dataSrc: 'values',
+    data: {
+      values: [
+        { label: 'Autotype', value: 'auto' },
+        { label: 'String', value: 'string' },
+        { label: 'Number', value: 'number' },
+        { label: 'Boolean', value: 'boolean' },
+        { label: 'Object', value: 'object' },
+      ],
+    },
+  },
   {
     key: 'template',
     conditional: {

src/components/radio/fixtures/comp11.js

@@ -0,0 +1,81 @@
+export default {
+	title: 'Test',
+	name: 'test',
+	path: 'test',
+	type: 'form',
+	display: 'form',
+	components: [
+    {
+      label: 'Radio',
+      optionsLabelPosition: 'right',
+      inline: false,
+      tableView: false,
+      values: [
+        {
+          label: '0',
+          value: '0',
+          shortcut: ''
+        },
+        {
+          label: '1',
+          value: '1',
+          shortcut: ''
+        }
+      ],
+      key: 'radioNumber',
+      type: 'radio',
+      dataType: 'number',
+      input: true
+    },
+    {
+      label: 'Radio',
+      optionsLabelPosition: 'right',
+      inline: false,
+      tableView: false,
+      values: [
+      {
+        label: '0',
+        value: '0',
+        shortcut: ''
+      },
+      {
+        label: '1',
+        value: '1',
+        shortcut: ''
+      }],
+      key: 'radioString',
+      dataType: 'string',
+      type: 'radio',
+      input: true
+    },
+    {
+      label: 'Radio',
+      optionsLabelPosition: 'right',
+      inline: false,
+      tableView: false,
+      values: [
+      {
+        label: 'true',
+        value: 'true',
+        shortcut: ''
+      },
+      {
+        label: 'false',
+        value: 'false',
+        shortcut: ''
+      }],
+      key: 'radioBoolean',
+      dataType: 'boolean',
+      type: 'radio',
+      input: true
+    },
+    {
+      type: 'button',
+      label: 'Submit',
+      key: 'submit',
+      disableOnInvalid: true,
+      input: true,
+      tableView: false
+    }
+  ]
+};

src/components/radio/fixtures/index.js

@@ -8,4 +8,5 @@ import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };
+import comp11 from './comp11';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };