Create dynamic Form component

[mrvini]

Create dynamic Form component that would be fed by the JSON or JS object. Object would define list of the elements and perhaps a callback function.

For example

// user form
let form = {
     "formDefinition":{
                "name": "User Data"
      }
     "fields" : {
           "firstName" : {
                  "label" : "First Name",
                  "type" : "awesome-form-input",
                  "placeholder" : "first name",
                  "validation" : "some regex",
                  "value" : "Joe Shmoe"
           },
           "gender" : {
                  "label" : "Gender",
                  "type" : "awesome-form-select",
                  "validation" : "some regex",
                  "value" : {
                          "m" : "Male",
                          "f" : "Female"
                   }
           }
     },
     "actions" : {
            "cancel" : {
                  "label" : "Cancel",
                  "callback" : function() {
                        console.log('clear form')
                  }
            },
            "save" : {
                  "label" : "Submit",
                  "callback" : function() {
                        console.log('submit')
                  }
            },
            "print" : {
                  "label" : "Print This Form",
                  "callback" : function() {
                        console.log('printing')
                  }
            }

     }
};

Component would render elements on the page base on the element type Element shall have the properties:

• "label" - if label is specified, display label above or next to the input element
• "type" - would define form component to be rendered to present the data
• "placeholder" - if specified would display a placeholder for the input fields
• "validation" - basic validation rule, probably regex
• "value" - if specified, value to be display

Actions would define what actions or button to put on the page, label would define the label of the button and the callback would define what action needs to happen upon clicking the button

That would be an awesome form component

[MaybeRex]

I'd like to propose this format for the form

 let form = {
                formDefinition:{
                    name: 'User Data'
                },
                fields:{
                    firstname:{
                        label:'Firstname',
                        placeholder: 'Walter',
                        element: 'input',
                        type: 'input',
                        id:'firstname'
                    },
                    lastname:{
                        label:'Lastname',
                        placeholder: 'White',
                        element: 'input',
                        type: 'input',
                        id:'lastname'
                    },
                    range:{
                        path:`${awesome.path}components/range/awesome-range.js`,
                        element:'awesome-range',
                        'data-max': 3,
                        'data-step': 1,
                        'data-value': 1,
                        'data-disabled':'true',
                        label:'Range',
                        id:'range'
                    },
                    gender:{
                        element:'div',
                        label:'Gender'
                    },
                    male:{
                        label:'Male',
                        element: 'input',
                        name:'gender',
                        type:'radio',
                        value:'male',
                        id:'male'
                    },
                    female:{
                        label:'Female',
                        element: 'input',
                        name:'gender',
                        type:'radio',
                        value:'female',
                        id:'female'
                    }
                },
                actions:{
                    save:{
                        label:'Save',
                        id:'save',
                        actionTrigger: 'saveAllFields'
                    },
                    clear:{
                        label:'Clear',
                        id: 'clear',
                        actionTrigger: 'clearAllFields'
                    }
                }
            }

[mrvini]

@MaybeRex , its not clear to me why would you specify ids on each element instead of using the keys as a replacement. Also, I would recommend grouping some of the keys together, for example

{
    range: {
        element: {
            name: 'awesome-range',
            path: `${awesome.path}components/range/awesome-range.js`, // for custom
        },
        dataAttr: {
            'max': 3,
            'step': 1,
            'value': 1,
            'disabled': 'true',
        }
        label: 'Range',
        description: ''
    }
}

this way, if element is an object, then it's most likely a custom component, otherwise, its regular component, also if dataAttr are provided, you know you have something to populate components with and don't have to iterate over all elements to find out about the data-xyz attributes

[MaybeRex]

Ok good suggestion,

here is our latest implementation of the object

const test = {
                    formDefinition:{
                        name: 'User Data'
                    },
                    fields:{
                        firstname:{
                            label:'Firstname',
                            placeholder: 'Walter',
                            element: 'input',
                            type: 'input',
                            id:'firstname'
                        },
                        lastname:{
                            label:'Lastname',
                            placeholder: 'White',
                            element: 'input',
                            type: 'input',
                            id:'lastname'
                        },
                        range:{
                            path:`${awesome.path}components/range/awesome-range.js`,
                            element:'awesome-range',
                            dataAttr:{
                                'data-max': 3,
                                'data-step': 1,
                                'data-value': 1,
                                'data-disabled':'false'
                            },
                            label:'Range',
                            id:'range'
                        },
                        gender:{
                            element:'div',
                            label:'Gender'
                        },
                        genderSelect:{
                            name:'gender',
                            type:'radio',
                            element: 'input',
                            value:{
                                male:'Male',
                                female:'Female'
                            }
                        }
                    },
                    actions:{
                        save:{
                            label:'Save',
                            id:'save',
                            actionTrigger: 'saveAllFields'
                        },
                        clear:{
                            label:'Clear',
                            id: 'clear',
                            actionTrigger: 'clearAllFields'
                        }
                    }
                }