QForm - Form Fields Generator



  • just working on a new component, essentially a form generator. You pass in the object that you want to ‘model’ and a schema for the object’s fields. Just a work in progress but looking for feedback and input. It currently only does q-input but eventually any of the quasar form components could be supported (the best way to do that is still unclear).

    seems like once this supports all the form compoenents it could be added to quasar. It’s really just a way to avoid hard coding a form template especially when a subform of a form might be dependent on a form field as in my use case where choosing a “type” requires a different set of input fields for that type…And too when one is using schemas (like json schemas) for their nosql database docments, like I am with feathersjs and nedb adding a few extra keys to handle the quasar form field type and its props is no big deal and avoids a lot of hard coding of html templates.

    <script>
    
    export default {
      data () {
        return {
        }
      },
      render (element) {
        return element('div', {}, this.makeForm(element))
      },
      props: ['values', 'schema'],
      methods: {
        makeForm (element) {
          let form = []
          console.log('values', this.values)
          for (let key in this.values) {
            let field =
            element('q-field', {
              props: {
                label: this.schema[key].label
              }
            }, [
              element(this.values[key].fieldType ? `q-${this.schema[key].fieldType}` : 'q-input', {
                props: {
    // put function here to get props given fieldType
                  value: this.values[key]
                },
                on: { input: (value) => {
                  this.values[key] = value
                  this.$emit('input', { name: key, value: value })
                }
                }
              })
            ]
            )// end field
            form.push(field)
            // console.log('field', key, field)
          }// end form field loop
          // console.log('the form object', form)
          return form
        }
      }
    }
    </script>
    
    <style lang="stylus">
    </style>
    

    Then in the calling component

          <q-collapsible class="col-11" v-on:remove v-on:add :label="device.name">
            <q-field label="Device Name">
             <q-input  v-model="device.name"/>
            </q-field>
            <q-field label="Type">
             <q-select v-model="device.type" :options="deviceTypesOptions()" />
            </q-field>
            <q-field label="Description">
              <q-input  v-model="device.desc"/>
            </q-field>
            <q-form class="" @input="update(device,$event)" :values="device.settings" :schema="deviceTypes[device.type].settings" ></q-form>
            <q-btn color="positive" @click="saveChanges(device,index)">Save Changes</q-btn>
          </q-collapsible>
    

    schema looks like this.

    // if no fieldType it's assumed to be q-input
     {
        i2cAddress : { type: Number, required: true, unique: true, fieldType: 'input', label: 'I2C Address', help: 'enter hex address' },
       defaultConfig: { type: String, required: true, default: 'output', fieldType: 'select', valids: ['toggle','momentary','input','output','custom'], label: 'pins mode', help: 'choose a mode for all pins on chip' },
        iPinA : { type: Number, label: 'SBC Pin Number' },
        iPinB : { type: Number, label: 'SBC Pin Number' }
     }


  • 0_1505527545904_Screenshot at 2017-09-15 19:03:55.png

    fields I2C Address and below come from the generator and changes to them emit to the parent form which then can update it’s data accordingly.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.