vue-generators / vue-form-generator

:clipboard: A schema-based form generator component for Vue.js
MIT License
2.99k stars 530 forks source link

Checklist inputName generation #461

Open mix359 opened 6 years ago

mix359 commented 6 years ago

Hi,

I'm trying to use the checklist in a form that will be submitted using standard html form request, and I'm facing a problem with the name generated for the checkbox inside the checklist.

With a normal html form you can send the values of some fields as array, setting their names to field[] or field[name]. That request is interpreted by PHP (I don't know the other languages) as an array of values, so it's easy to save the values of something like a multi-checkbox. There's two types of array you can generate:

<input type="checkbox" name="columns[]" value="test1" /> <input type="checkbox" name="columns[]" value="test2" />

That would generate (if all the checkbox is checked) an array with ["test1", "test2"];

<input type="checkbox" name="columns[test1]" value="1" /> <input type="checkbox" name="columns[test2]" value="1" />

That would generate (if all the checkbox is checked) an array with ["test1" => 1, "test2" => 1];

I would like to use the first behavior to save some columns if their checked, but with the current way of generate the checkbox fieldName I can't. It currently generated as fieldName_checkboxName, and there require a processation in the backend to know which checkbox are selected.

I would ask if there's currently any option to obtain that fieldName/value combination, or if not, if I can send a PR that add the ability to use a lambda as inputName or option in checklistOptions, to generate the name of the internal checkbox.

Thanks Cheers Mix

zoul0813 commented 6 years ago

What do you propose as an alternative to the existing logic? If you submit a PR, it would have to be backwards compatible with what we have configured now.

mix359 commented 6 years ago

Sorry for the late reply (I was busy with a project...)

I've tried doing those two modification, that introduce new option, so it should be backwards compatible:

I've added the ability to pass a function in the checklistOptions, named inputName, that create the name of the field

getInputName(item){ if(this.schema && typeof this.schema["checklistOptions"] !== "undefined" && typeof this.schema["checklistOptions"]["inputName"] === "function") { return this.schema["checklistOptions"]["inputName"](item, this.schema); } else if(this.schema && this.schema.inputName && this.schema.inputName.length > 0){ return slugify(this.schema.inputName + "_" + this.getItemValue(item)); } return slugify(this.getItemValue(item)); },

I've added the :value proprieties to the input html tag, with the same value that is used by javascript when the field is checked.

input(:id="getFieldID(schema)", type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)", :name="getInputName(item)" :value="getItemValue(item)")

That's is an example of function I've passed to the checklistOptions: checklistOptions: {inputName: (item, schema) => schema.inputName + "[]"},

With those two modification, the form works as a standard html form and is decoded by php. I've used a function, so anyone can use the format needed (for example, it can create the inputName as schema.inputName + "[" + schema.id + "]")

Hope those two change can be included in the package. Cheers Mix