🐛 fix: Handle non selected lists

dev/app.vue

@@ -18,7 +18,7 @@
 						| Delete
 
 				.errors.text-center
-					div.alert.alert-danger(v-for="item in validationErrors") {{ item.field.label}}: 
+					div.alert.alert-danger(v-for="item in validationErrors", track-by="$index") {{ item.field.label}}: 
 						strong {{ item.error }}
 
 				vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")

dev/schema.js

@@ -120,21 +120,26 @@ module.exports = {
 			type: "masked",
 			label: "Mobile",
 			model: "mobile",
-			mask: "(99) 999-9999"
+			mask: "(99) 999-9999",
+			validator: validators.required
 		},		
 		{
 			type: "spectrum",
 			label: "Color",
 			model: "favoriteColor",
+			required: true,
 			colorOptions: {
 				//preferredFormat: "rgb"
-			}
+			},
+			validator: validators.required
 		},	
 		{
 			type: "image",
 			label: "Avatar",
 			model: "avatar",
-			browse: true
+			required: true,
+			browse: true,
+			validator: validators.required
 
 		},
 		{
@@ -157,6 +162,7 @@ module.exports = {
 			label: "DOB",
 			model: "dob",
 			multi: true,
+			required: true,
 			placeholder: "User's birth of date",
 			min: moment("1900-01-01").toDate(),
 			max: moment("2016-01-01").toDate(),
@@ -208,13 +214,11 @@ module.exports = {
 			multi: true,
 			min: 1,
 			max: 10,
+			required: true,
 			sliderOptions: {
 				grid: true
 			},
-			validator: [
-				validators.integer,
-				validators.number
-			]
+			validator: validators.integer
 		},	
 
 		{
@@ -244,7 +248,7 @@ module.exports = {
 				{ id: "it", name: "Italic" },
 				{ id: "fr", name: "French" }
 			],
-			default: "en_GB"
+			validator: validators.required
 		},
 		{
 			type: "selectEx",
@@ -253,13 +257,14 @@ module.exports = {
 			multi: true,
 			required: true,
 			values: faker.definitions.address.country,
-			default: "United Kingdom",
+			//default: "United Kingdom",
 			multiSelect: false,
 			selectOptions: {
 				// https://silviomoreto.github.io/bootstrap-select/options/
 				liveSearch: true,
 				size: 10
-			}
+			},
+			validator: validators.required
 		},
 		{
 			type: "text",
@@ -351,7 +356,7 @@ module.exports = {
 				{ id: "user", name: "Registered User"},
 				{ id: "visitor", name: "Visitor"}
 			],
-			default: null
+			validator: validators.required
 		},		
 		{
 			type: "label",

src/fields/fieldSelect.vue

@@ -1,5 +1,6 @@
 <template lang="jade">
 	select.form-control(v-model="value", :disabled="disabled")
+		option(:disabled="schema.required", :value="null", :selected="value == undefined") &lt;Not selected&gt;
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>
 

src/fields/fieldSelectEx.vue

@@ -1,5 +1,6 @@
 <template lang="jade">
 	select.selectpicker(v-model="value", :disabled="disabled", :multiple="schema.multiSelect", :title="schema.placeholder", data-width="100%")
+		option(:disabled="schema.required", v-if="schema.multiSelect !== true", :value="null", :selected="value == undefined") &lt;Not selected&gt;
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>
 

src/formGenerator.vue

@@ -15,7 +15,7 @@
 							button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
 					.hint(v-if="field.hint") {{ field.hint }}
 					.errors(v-if="field.errors && field.errors.length > 0")
-						span(v-for="error in field.errors") {{ error }}
+						span(v-for="error in field.errors", track-by="$index") {{ error }}
 </template>
 
 <script>
@@ -65,7 +65,11 @@
 
 		watch: {
 			// new model loaded
-			model: function() {
+			model: function(newModel, oldModel) {
+				if (oldModel == newModel) // model got a new property
+					return;
+
+				console.log("Model changed!");
 				if (this.options.validateAfterLoad === true && this.isNewModel !== true)
 					this.validate();
 				else

src/utils/validators.js

@@ -13,6 +13,10 @@ function checkEmpty(value, required) {
 
 module.exports = {
 
+	required(value, field) {
+		return checkEmpty(value, field.required); 
+	},
+
 	number(value, field) {
 		let res = checkEmpty(value, field.required); if (res != null) return res;
 

test/unit/specs/fields/fieldSelect.spec.js

@@ -20,6 +20,7 @@ describe("fieldSelect.vue", () => {
 			type: "select",
 			label: "Cities",
 			model: "city",
+			required: false,
 			values: [
 				"London",
 				"Paris",
@@ -46,11 +47,17 @@ describe("fieldSelect.vue", () => {
 
 		it("should contain option elements", () => {
 			let options = input.querySelectorAll("option");
-			expect(options.length).to.be.equal(4);
+			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
 
-			expect(options[1].value).to.be.equal("Paris");
-			expect(options[1].textContent).to.be.equal("Paris");
-			expect(options[1].selected).to.be.true;
+			expect(options[2].value).to.be.equal("Paris");
+			expect(options[2].textContent).to.be.equal("Paris");
+			expect(options[2].selected).to.be.true;
+		});
+
+		it("should contain a <non selected> element", () => {
+			let options = input.querySelectorAll("option");
+			expect(options[0].disabled).to.be.false;
+			expect(options[0].textContent).to.be.equal("<Not selected>");
 		});
 
 		it("should contain the value", (done) => {
@@ -88,6 +95,16 @@ describe("fieldSelect.vue", () => {
 
 		});
 
+		it("should contain a disabled <non selected> element if required", (done) => {
+			schema.required = true;
+			vm.$nextTick( () => {
+				let options = input.querySelectorAll("option");
+				expect(options[0].disabled).to.be.true;
+				expect(options[0].textContent).to.be.equal("<Not selected>");
+				done();
+			});
+		});
+
 	});
 
 	describe("check static values with { id, name } objects", () => {
@@ -112,12 +129,12 @@ describe("fieldSelect.vue", () => {
 
 		it("should contain option elements", () => {
 			let options = input.querySelectorAll("option");
-			expect(options.length).to.be.equal(4);
+			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
 
-			expect(options[1].value).to.be.equal("2");
-			expect(options[1].textContent).to.be.equal("Paris");
-			expect(options[1].selected).to.be.true;
-			expect(options[0].selected).to.be.false;
+			expect(options[2].value).to.be.equal("2");
+			expect(options[2].textContent).to.be.equal("Paris");
+			expect(options[2].selected).to.be.true;
+			expect(options[1].selected).to.be.false;
 		});		
 
 		it("should contain the value", (done) => {

test/unit/specs/fields/fieldSelectEx.spec.js

@@ -20,6 +20,7 @@ describe("fieldSelectEx.vue", () => {
 			label: "Cities",
 			model: "city",
 			multiSelect: false,
+			required: false,
 			values: [
 				"London",
 				"Paris",
@@ -47,13 +48,19 @@ describe("fieldSelectEx.vue", () => {
 
 		it("should contain option elements", () => {
 			let options = input.querySelectorAll("option");
-			expect(options.length).to.be.equal(4);
+			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
 
-			expect(options[1].value).to.be.equal("Paris");
-			expect(options[1].textContent).to.be.equal("Paris");
-			expect(options[1].selected).to.be.true;
+			expect(options[2].value).to.be.equal("Paris");
+			expect(options[2].textContent).to.be.equal("Paris");
+			expect(options[2].selected).to.be.true;
 		});
 
+		it("should contain a <non selected> element", () => {
+			let options = input.querySelectorAll("option");
+			expect(options[0].disabled).to.be.false;
+			expect(options[0].textContent).to.be.equal("<Not selected>");
+		});		
+
 		it("should contain the value", (done) => {
 			vm.$nextTick( () => {
 				expect(input.value).to.be.equal("Paris");	
@@ -89,10 +96,23 @@ describe("fieldSelectEx.vue", () => {
 
 		});
 
+		it("should contain a disabled <non selected> element if required", (done) => {
+			schema.required = true;
+			vm.$nextTick( () => {
+				let options = input.querySelectorAll("option");
+				//expect(options[0].disabled).to.be.true;
+				expect(options[0].textContent).to.be.equal("<Not selected>");
+				done();
+			});
+		});
+
 		it("should not be multiple", (done) => {
 			schema.multiSelect = true;
 			vm.$nextTick( () => {
 				expect(input.multiple).to.be.true;	
+				let options = input.querySelectorAll("option");
+				expect(options.length).to.be.equal(4); // no <non selected>
+
 				done();
 			});
 		});
@@ -121,12 +141,12 @@ describe("fieldSelectEx.vue", () => {
 
 		it("should contain option elements", () => {
 			let options = input.querySelectorAll("option");
-			expect(options.length).to.be.equal(4);
+			expect(options.length).to.be.equal(4 + 1); // +1 for <non selected>
 
-			expect(options[1].value).to.be.equal("2");
-			expect(options[1].textContent).to.be.equal("Paris");
-			expect(options[1].selected).to.be.true;
-			expect(options[0].selected).to.be.false;
+			expect(options[2].value).to.be.equal("2");
+			expect(options[2].textContent).to.be.equal("Paris");
+			expect(options[2].selected).to.be.true;
+			expect(options[1].selected).to.be.false;
 		});		
 
 		it("should contain the value", (done) => {