diff --git a/dev/checklist/app.vue b/dev/checklist/app.vue index be8c469e..573bcdab 100644 --- a/dev/checklist/app.vue +++ b/dev/checklist/app.vue @@ -23,6 +23,7 @@ export default { label: "Skills", model: "skills", required: true, + inputName:"skill", min: 2, listBox: true, values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"], diff --git a/src/fields/core/fieldChecklist.vue b/src/fields/core/fieldChecklist.vue index 777c94d7..e9731754 100644 --- a/src/fields/core/fieldChecklist.vue +++ b/src/fields/core/fieldChecklist.vue @@ -3,7 +3,7 @@ .listbox.form-control(v-if="schema.listBox", :disabled="disabled") .list-row(v-for="item in items", :class="{'is-checked': isItemChecked(item)}") label - input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)") + input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)" :name="getInputName(item)") | {{ getItemName(item) }} .combobox.form-control(v-if="!schema.listBox", :disabled="disabled") @@ -14,7 +14,7 @@ .dropList .list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': isItemChecked(item)}") label - input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)") + input(type="checkbox", :checked="isItemChecked(item)", :disabled="disabled", @change="onChanged($event, item)" :name="getInputName(item)") | {{ getItemName(item) }} @@ -45,10 +45,18 @@ return this.value.length; return 0; - } + } }, methods: { + + getInputName(item){ + if(this.schema && this.schema.inputName && this.schema.inputName.length > 0){ + return this.schema.inputName + "_" + this.getItemValue(item); + } + return this.getItemValue(item); + }, + getItemValue(item) { if (isObject(item)){ if (typeof this.schema["checklistOptions"] !== "undefined" && typeof this.schema["checklistOptions"]["value"] !== "undefined") { diff --git a/test/unit/specs/fields/fieldChecklist.spec.js b/test/unit/specs/fields/fieldChecklist.spec.js index 470654cb..3514b292 100644 --- a/test/unit/specs/fields/fieldChecklist.spec.js +++ b/test/unit/specs/fields/fieldChecklist.spec.js @@ -524,6 +524,7 @@ describe("fieldChecklist.vue", function() { type: "checklist", label: "Skills", model: "skills", + inputName:"", values: [ "HTML5", "Javascript", @@ -581,6 +582,39 @@ describe("fieldChecklist.vue", function() { done(); }); }); + + it("should contain input name field withouth inputName", (done) => { + + checkboxes = dropList.querySelectorAll("input[type=checkbox]"); + expect(checkboxes[0].name).to.be.equal("HTML5"); + expect(checkboxes[1].name).to.be.equal("Javascript"); + expect(checkboxes[2].name).to.be.equal("CSS3"); + expect(checkboxes[3].name).to.be.equal("CoffeeScript"); + expect(checkboxes[4].name).to.be.equal("AngularJS"); + expect(checkboxes[5].name).to.be.equal("ReactJS"); + expect(checkboxes[6].name).to.be.equal("VueJS"); + + done(); + + }); + + it("should contain input name field with inputName", (done) => { + + schema.inputName="skill"; + + vm.$nextTick( () => { + checkboxes = dropList.querySelectorAll("input[type=checkbox]"); + expect(checkboxes[0].name).to.be.equal("skill_HTML5"); + expect(checkboxes[1].name).to.be.equal("skill_Javascript"); + expect(checkboxes[2].name).to.be.equal("skill_CSS3"); + expect(checkboxes[3].name).to.be.equal("skill_CoffeeScript"); + expect(checkboxes[4].name).to.be.equal("skill_AngularJS"); + expect(checkboxes[5].name).to.be.equal("skill_ReactJS"); + expect(checkboxes[6].name).to.be.equal("skill_VueJS"); + + done(); + }); + }); it("should checked the values", () => { expect(isChecked(0)).to.be.false;