Hello,

please add compatibility width new quasar app v2.

Thanks

Hi @mesqueeb,

I've got another one. I'm a bit lost on how to solve this and hope you don't mind:

When hitting the save button, I'm calling some function that saves data (ultimately in the backend) and possibly returns validation errors from the backend per field. I'd like to display those error messages right with the fields as well.

Example:

<template>
  <q-page class="flex flex-center">
  <div>
    <div class="row full-width">
      <EasyForm
        v-model="easyFormValue"
        v-bind="easyFormProps"
        v-on:save="onSave"
      />
    </div>
</div>
</q-page>
</template>

<script>

export default {
  name: 'EasyForm1',
  methods: {
    onSave () {
        window.setTimeout(function () { 
            console.log("found a validation error")
            // set (or keep) mode to 'edit' 
            // show external error messages
        }, 1000);
    }
  },
  data () {
    return {
        easyFormValue: {},
        easyFormProps: {
            actionButtons: ['edit', 'save'],
            actionButtonsPosition: 'bottom',
            mode: "edit",
            schema: [
                {
                    id: 'name',
                    component: 'QInput',
                    label: 'Superhero name',
                    filled: true,
                    stack: true,
                    // rules: [val => !!val || 'required', this.$rules.email('email dude!')],
                    lazyRules: true,
                    stackLabel: true
                },
                {
                    id: 'btn',
                    component: 'EfBtn',
                    btnLabel: 'Touch me',
                    events: {
                        click: (val, context) => {
                                                        console.log('@CLICK\nval → ', val, '\ncontext → ', context)
                                                        context.mode = 'view'
                                                        // gives: // [Vue warn]: Avoid mutating a prop 
                                                        
                                                },
                    },
                }
            ]
        }
    }
  }
}
</script>

Idea 1: Handle this with the @save event. But since that data-saving function returns a promise, I need to wait for the result and the mode is switched back to 'view' already (I don't know how to change it manually here) and I don't know how to address the fields error message attribute directly.

Idea 2: Handle this with a custom button. But there I'm running into the same problem: how to switch the mode to view in case of success of external validation. And how to address the error message attributes directly.

Idea 3: try to 'inject' the error with message through the native QInput interface (attributes error and error-message). But then the error field would need to bind to some reactive property - tried some with your evaluated props but did not get anywhere close.

Any hints on how to display the external validation messages and how to influence the change of modes?

Thanks in advance!

The structure of an EasyForm looks like:

<EasyForm>
  <EasyField>
    <EfInput>
      <q-input />
    </EfInput>
  </EasyField>
  <!-- other fields -->
</EasyForm>

Need a doc page to explain what each component does:

EasyForm:

• generates EasyFields
• adds "actionButtons"
• check's the "showCondition" of each field
• keeps track of the edited fields & keeps a backup to restore when cancel is pressed
• flattens and nests the formData to allow for nested props

EasyField:

• adds label & sublabels
• resolves all "Evaluated Props"
• generates a sub component based on the "fieldType" (eg. 'input' generates 'EfInput')
• resolves the functions: format and parseInput.

Ef... (eg. EfInput, EfSelect, ...)

• a wrapper for native elements and/or quasar elements

When using single fields, be sure to write about the benefits of using Ef... over EasyField and the other way around.

Hello,

Is there a to change the format of the date? I read in the documents that the default is YYYY/MM/DD, but I need it to have it like DD/MM/YYYY.

I have tried to change the dateformat to DD/MM/YYYY, but the input validation sees that is an error give me the warning: Field is required

This is the code:

id: prop, component: 'QInput', label: 'actualstart *', required: true, // parseInput: val => new Date(val), parseInput: val => date.formatDate(val), valueType: 'date', dateFormat: 'DD/MM/YYYY', // // component props: mask: '##-##-####', placeholder: 'dd-MM-yyyy', rules: ['##-##-####']

An EasyForm allows to access nested props inside a flat form "schema".

Need a demo page explaining this.

Hello!

I was searching for libraries to generate forms in Vue for my settings-page when I came across this repo, as I'm already using quasar I had to give it a try, and I really like it so far.

However something I'm missing is the possibility to add additional elements to fields in a persistent way, more specific, buttons with onclick callbacks.

The EasyForm component already support custom buttons through the actionButtons prop,
maybe it could be added to EasyField too?

Example Actions

• Reset a field to its default value.
• Copy field value to clipboard.
• Interactive form builders can clone/remove fields.
• Inspect a fields context via a dialog window.
• Star / add field to favorites. Great way to find back to specific fields in the future (if you got a huge amount of settings).

..etc, it opens up a lot of doors.

Example Schema

[
  {
    id: "name",
    fieldType: "input",
    valueType: "string",
    label: "Superhero name",
    subLabel: "Think of something cool.",
    actionButtons: [
      {
        dense: true,
        flat: true,
        round: true,
        icon: "delete",
        color: "red-12",
        events: {
          click(event, context, field?){ /* .. */ }
        }
      },
      // ....
    ]
  }
];

Example Result

Regards 😃

https://github.com/mesqueeb/quasar-ui-easy-forms/blob/master/ui/src/components/fields/EfToggle.vue#L2

I'm using the component is working very smoothly, but now I have a need that I don't know if the component would be able to meet.
You need to use two QExpansion in the same form to create a subdivision in the form, it would be possible to pass children to some component. I couldn't find anything in the documentation.

Thank you

In the docs: https://quasar-easy-forms.web.app/evaluatedProps
Dynamic Options of a Select Field

If I select "2016" "Chevy" "Malibu" "2.5" then go back to choose "2015", I've still got "Chevy" "Malibu" "2.5" selected so I then I risk saving invalid data.

I think when we select a new value everything lower in the hierarchy should be reset.

These are two not so great additions. Do I reaaaally need them?
Do they have a good implementation?
Any performance issues?

I was wondering about chainging the position of the action buttons.
I did find some clues that you already integrated this, at least the actionButtonsPosition in EasyForm.vue suggests that.

How do I configure this in the schema? Could not find the right hint in the documentation/demo page.

deprecate fieldStyle and fieldClasses for style and class. Because why not.

see docs below

add a helper function

validateFieldPerSchema(blueprint, data) => (boolean | string)
validatePerSchema(schema, data) => boolean | {[fieldId: string]: (boolean | string)}

use this helper in EasyForm.vue

Hi,

I cannot get the edit mode to work in this minimal example, copied from the demo:

<template>
  <q-page class="flex flex-center">
  <div>
    <div class="row full-width">
      <EasyForm
        v-model="easyFormValue"
        v-bind="easyFormProps"
      />
    </div>
</div>
</q-page>
</template>

<script>

const easyFormProps = {
    actionButtons: ['delete', 'archive', 'cancel', 'edit', 'save'],
    mode: "edit",
  schema: [
    {
      id: 'name',
      component: 'QInput',
      label: 'Superhero name',
      subLabel: 'Think of something cool.',
    },
    {
      id: 'powerOrigin',
      component: 'QBtnToggle',
      label: 'Power origin',
      subLabel: 'Where does your power come from?',
      // component props:
      options: [
        { label: 'Mutation', value: 'mutation' },
        { label: 'Self taught', value: 'self' },
        { label: 'By item', value: 'item' },
      ],
      spread: true,
    },
  ],
}
export default {
  name: 'EasyForm1',
  data () {
    return {
        easyFormValue: {},
        easyFormProps
    }
  }
}
</script>

I added easyFormValue: {} to the data property (not shown in demo), but the fields remain like in the view-mode:

Also the example does not show the buttons for 'power origin'.

I suppose I'm overlooking something very simple. Any hint is appreciated.

I can't figure out how to access the formData to wipe the fields and state when the database transaction is successful?

• Show code as ES6 (eg. arrow functions)
• Fix proper indentation on props that stretch over multiple lines

mesqueeb/quasar-ui-component-info-card#1

Hi, Mr. Mesqueeb.

I've tried to use EasyForms to show partial forms that are shown as one but with steps or the like.
I have the schemas (partial forms) defined on js files separately, like this:

/*schema1.js*/
const mySchema = {
  schema: [
    {
      id: 'problematicID',
      label: 'Does it work?',
      component: 'QOptionGroup',
      type: 'checkbox',
      default: () => [],
      options: [
        { label: 'Yes', value: 1 },
        { label: 'No', value: 2 }
      ]
    },
    {
      id: 'doeswork',
      label: 'It does work :)',
      component: 'QInput',
      evaluatedProps: ['showCondition'],
      showCondition: (_, { formData }) => formData.problematicID === 1
    },
    {
      id: 'doesnotwork',
      label: 'It does not work :(',
      component: 'QInput',
      evaluatedProps: ['showCondition'],
      showCondition: (_, { formData }) => formData.problematicID === 2
    }
  ]
}

export default mySchema

And, for schema2:

const schema2 = {
  schema: [
    {
      id: 'sillyquestion',
      label: 'A Silly Question',
      component: 'QInput'
    }
  ]
}

export default schema2

My component looks like this:

<template>
  <div>
    {{ partial }}
    <EasyForm
      v-model="partial"
      v-bind="exampleProps[next]"
    />
    <q-btn
      label="Siguiente"
      @click="changeSection"
    />
  </div>
</template>

<script>
import mySchema from './schema'
import mySchema2 from './schema2'

export default {
  name: 'MultipleInput',
  data () {
    return {
      next: 0,
      partial: {},
      exampleProps: [mySchema2, mySchema]
    }
  },
  methods: {
    changeSection () {
      ++this.next
    }
  }
}
</script>

The schema with the OptionGroup component shows that the field 'problematicID' is undefined, then does not make the conditional rendering of the other fields in the schema.

I've tried to put a :key prop with the next counter assigned to it, now, it does not show any errors but does not make the conditional rendering either.

Also, if I change the order of the schemas in the array, does not make the conditional rendering, though.

Blitzar Release! 🎉

Quasar Easy Forms & Tables was upgraded to become much more powerful!
The new version is called Blitzar

• see blog post here: https://lucaban.medium.com/better-faster-vue-forms-with-blitzar-a0d71258a3bb
• see documentation here: https://blitzar.cycraft.co
• see the upgrade guide here: https://github.com/CyCraft/blitzar/releases/tag/v0.0.14

Hello mesqueeb, first congratulations and thank you for the excellent component.
I have a problem regarding the "easyFormValue" property, I use a grid together with QDrawer, so the user clicks on the grid and the open form next to it should be updated, but that is not what is happening.

I tried to pass the "easyFormValue" property as a prop to receive the values directly from the grid (there are 2 separate files), the fields do not update. At the time of creation, the only field I have on this form is inserted with the correct value, but if I click on the grid again, the value of the input is not updated.
Is there any property for this to work or should I create a method for that?
Follow my code

grid call

<q-drawer
      title="Show color" :width="735" side="right" v-model="visible" v-if="visible" overlay
    >
    <ColorFormVue :formData="rowData"></ColorFormVue>
</q-drawer>

....
onRowClick (evt, row) {
        this.visible = true
        this.rowData = row
        this.$root.$emit('input', row)
}

color form

export default {
  name: 'ColorForm',
  props: {
    formData : {},
  },
  data() {
    return {
      edit: false,
      readonly: true,
      confirm: false,
      easyFormProps: {
        mode: 'edit',
        actionButtons: ['edit', 'save'],
        actionButtonsPosition: 'bottom',
        schema: [
          {
            id: 'name',
            component: 'QInput',
            label: 'Superhero name',
            internalLabels: true,
            readonly: false,
            // parseValue: (val,{formData}) => this.formData.name,
            required: true
          }
        ]
      },
      easyFormValue: this.formData != null ? this.formData : {}
    };
  },

<template>
 <q-card>
          <EasyForm outlined standout
              v-model="easyFormValue"
              v-bind="easyFormProps"
              @save="onSave">
          </EasyForm>
        </q-card>
</template>

I know it’s not the best place to ask that kind of question, but I’ve found no other way to ask.

Thanks for listening

• demo page for top/left label position
• demo page showcasing how to style the form: colours, background, font-sizes, etc...
• demo page with responsive column-count based on window width

If I make and error, "There are remaining errors." appears and a prompt about each error also appears alongside the field. As I fix the errors the prompts disappear but "There are remaining errors." does not. When all errors are fixed this should disappear.

I plan to completely extract EasyForm and EasyField logic into a separate package: vue-easy-forms.

vue-easy-forms

Benefits:

1. When EasyForm and EasyField logic is extracted it's clear what logic is brought forth by these, and which logic is brought forth by the actual field (EfInput etc.)
2. It's easier to use your own wrapper components, eg. register your own input field component and make it usable with an EasyForm and its schema.
3. Remove Quasar dependency, makes the package framework-agnostic - and it should be promoted as such.

Todo:

• Create vue-easy-forms documentation website & vue plugins.
• Create a method to register custom fields to the respective fieldType.
• Think how to provide quasar-ui-easy-forms after this extraction
• Currently registering a component as EfSomething allows for it to be used as fieldType: 'something'. Should this be kept or make it so components need to be registered via vue.use syntax.

Other breaking changes planned:

• Display no action buttons by default