xconcepts-dynamic-form - npm Package Compare versions

Comparing version 0.0.9 to 0.1.0

dist/cjs/dynamic-form.cjs.entry.js

@@ -68,3 +68,3 @@ 'use strict';
     var _a, _b;
-    return (index.h("div", { class: "input-group" }, index.h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), index.h("div", { class: "input-group-append" }, index.h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, index.h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (index.h("div", { class: "input-group" }, index.h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), index.h("div", { class: "input-group-append" }, index.h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, index.h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
@@ -74,3 +74,3 @@ renderSelectControl(input) {
     // console.log(input);
-    return (index.h("div", { class: "input-group" }, index.h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, index.h("option", { value: "" }, "Select"), this.generateSelectControlOption(input))));
+    return (index.h("div", { class: "input-group" }, index.h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, index.h("option", { value: "" }, "Select"), this.generateSelectControlOption(input))));
   }
@@ -95,3 +95,3 @@ generateSelectControlOption(input) {
       var _a, _b;
-      return (index.h("label", { class: "radio-item" }, index.h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key] + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), index.h("div", { class: "radio-circle" }), index.h("div", { class: "radio-label" }, option[input.keyName]))
+      return (index.h("label", { class: "radio-item" }, index.h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + '-' + option[input.key] + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), index.h("div", { class: "radio-circle" }), index.h("div", { class: "radio-label" }, option[input.keyName]))
       // <option value={option[input.key]}>{option[input.keyName]}</option>
@@ -104,12 +104,54 @@ );
     // console.log(input);
-    return (index.h("div", { class: "input-group" }, index.h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, index.h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), index.h("div", { class: "checkbox-square" }), index.h("div", { class: "checkbox-label" }, input.label), index.h("div", null, this.formErrors[input.name] ? index.h("span", { class: "text-danger" }, index.h("small", null, "mandatory")) : ''))));
+    return (index.h("div", { class: "input-group" }, index.h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, index.h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), index.h("div", { class: "checkbox-square" }), index.h("div", { class: "checkbox-label" }, input.label), index.h("div", null, this.formErrors[input.name] ? index.h("span", { class: "text-danger" }, index.h("small", null, "mandatory")) : ''))));
   }
   renderTextAreaControl(input) {
     var _a, _b;
-    return (index.h("div", { class: "input-group" }, index.h("textarea", Object.assign({ name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control text-area-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input.name), id: input.name + this.index, "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), index.h("div", { class: "input-group-append text-area" }, index.h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, index.h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (index.h("div", { class: "input-group" }, index.h("textarea", Object.assign({ name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control text-area-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), index.h("div", { class: "input-group-append text-area" }, index.h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, index.h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
-  handleInput(event, inputName) {
+  handleInput(event, input) {
     event.preventDefault();
     this.formError = false;
-    this.formErrors[inputName] = !event.target.validity.valid;
+    // this.formErrors[inputName] = !event.target.validity.valid;
+    let inputName = input.name;
+    this.formErrors[inputName] = false;
+    let xInput = document.getElementById(input.name + this.index);
+    let trueValidation = "";
+    let validationObject = xInput.validity ? xInput.validity : {};
+    for (const key in validationObject) {
+      if (key !== "valid" && validationObject[key]) {
+        trueValidation = key;
+        this.formError = true;
+        this.formErrors[inputName] = true;
+        switch (trueValidation) {
+          case 'patternMismatch':
+            this.formErrorsMessage[inputName] = input.validation.patternErrorMessage;
+            break;
+          case 'stepMismatch':
+            this.formErrorsMessage[inputName] = input.validation.stepErrorMessage;
+            break;
+          case 'rangeOverflow':
+            this.formErrorsMessage[inputName] = input.validation.maxErrorMessage;
+            break;
+          case 'rangeUnderflow':
+            this.formErrorsMessage[inputName] = input.validation.minErrorMessage;
+            break;
+          case 'tooLong':
+            this.formErrorsMessage[inputName] = input.validation.maxlengthErrorMessage;
+            break;
+          case 'tooShort':
+            this.formErrorsMessage[inputName] = input.validation.minlengthErrorMessage;
+            console.log(this.formErrorsMessage);
+            // this.render();
+            break;
+          case 'typeMismatch':
+            this.formErrorsMessage[inputName] = input.validation.typeMismatchErrorMessage;
+            break;
+          case 'valueMissing':
+            this.formErrorsMessage[inputName] = input.validation.requiredErrorMessage;
+            break;
+        }
+        break;
+      }
+    }
+    console.log(xInput.validity);
     setTimeout(() => {
@@ -200,6 +242,11 @@ this.formError = true;
   renderErrorMessage(input) {
-    return (index.h("div", { class: 'errorMessage error-' + input.name }, this.formErrorsMessage[input.name]));
+    if (this.formErrors[input.name]) {
+      return (index.h("div", { class: 'errorMessage error-' + input.name }, this.formErrorsMessage[input.name]));
+    }
+    else {
+      return "";
+    }
   }
   render() {
-    return (index.h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (index.h("div", { class: 'form-group form-type-' + input.type + ' form-name-' + input.name }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input), this.renderErrorMessage(input)))), this.renderButton()));
+    return (index.h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off', id: 'app-form-' + this.index }, this.formData.map((input) => (index.h("div", { class: 'form-group form-type-' + input.type + ' form-name-' + input.name }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input), this.renderErrorMessage(input)))), this.renderButton()));
   }
@@ -206,0 +253,0 @@ static get watchers() { return {

dist/collection/components/dynamic-form/dynamic-form.js

@@ -59,3 +59,3 @@ import { h } from '@stencil/core';
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
@@ -65,3 +65,3 @@ renderSelectControl(input) {
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), this.generateSelectControlOption(input))));
+    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), this.generateSelectControlOption(input))));
   }
@@ -86,3 +86,3 @@ generateSelectControlOption(input) {
       var _a, _b;
-      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key] + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
+      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + '-' + option[input.key] + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
       // <option value={option[input.key]}>{option[input.keyName]}</option>
@@ -95,12 +95,56 @@ );
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
+    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
   }
   renderTextAreaControl(input) {
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("textarea", Object.assign({ name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control text-area-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input.name), id: input.name + this.index, "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append text-area" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("textarea", Object.assign({ name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control text-area-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append text-area" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
-  handleInput(event, inputName) {
+  handleInput(event, input) {
     event.preventDefault();
     this.formError = false;
-    this.formErrors[inputName] = !event.target.validity.valid;
+    // this.formErrors[inputName] = !event.target.validity.valid;
+    let inputName = input.name;
+    this.formErrors[inputName] = false;
+    let xInput = document.getElementById(input.name + this.index);
+    let trueValidation = "";
+    let validationObject = xInput.validity ? xInput.validity : {};
+    for (const key in validationObject) {
+      if (key !== "valid" && validationObject[key]) {
+        trueValidation = key;
+        this.formError = true;
+        this.formErrors[inputName] = true;
+        switch (trueValidation) {
+          case 'patternMismatch':
+            this.formErrorsMessage[inputName] = input.validation.patternErrorMessage;
+            break;
+          case 'stepMismatch':
+            this.formErrorsMessage[inputName] = input.validation.stepErrorMessage;
+            break;
+          case 'rangeOverflow':
+            this.formErrorsMessage[inputName] = input.validation.maxErrorMessage;
+            break;
+          case 'rangeUnderflow':
+            this.formErrorsMessage[inputName] = input.validation.minErrorMessage;
+            break;
+          case 'tooLong':
+            this.formErrorsMessage[inputName] = input.validation.maxlengthErrorMessage;
+            break;
+          case 'tooShort':
+            this.formErrorsMessage[inputName] = input.validation.minlengthErrorMessage;
+            console.log(this.formErrorsMessage);
+            // this.render();
+            break;
+          case 'typeMismatch':
+            this.formErrorsMessage[inputName] = input.validation.typeMismatchErrorMessage;
+            break;
+          case 'valueMissing':
+            this.formErrorsMessage[inputName] = input.validation.requiredErrorMessage;
+            break;
+          default:
+            break;
+        }
+        break;
+      }
+    }
+    console.log(xInput.validity);
     setTimeout(() => {
@@ -193,6 +237,11 @@ this.formError = true;
   renderErrorMessage(input) {
-    return (h("div", { class: 'errorMessage error-' + input.name }, this.formErrorsMessage[input.name]));
+    if (this.formErrors[input.name]) {
+      return (h("div", { class: 'errorMessage error-' + input.name }, this.formErrorsMessage[input.name]));
+    }
+    else {
+      return "";
+    }
   }
   render() {
-    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: 'form-group form-type-' + input.type + ' form-name-' + input.name }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input), this.renderErrorMessage(input)))), this.renderButton()));
+    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off', id: 'app-form-' + this.index }, this.formData.map((input) => (h("div", { class: 'form-group form-type-' + input.type + ' form-name-' + input.name }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input), this.renderErrorMessage(input)))), this.renderButton()));
   }
@@ -199,0 +248,0 @@ static get is() { return "dynamic-form"; }

dist/components/dynamic-form.js

@@ -65,3 +65,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
@@ -71,3 +71,3 @@ renderSelectControl(input) {
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), this.generateSelectControlOption(input))));
+    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), this.generateSelectControlOption(input))));
   }
@@ -92,3 +92,3 @@ generateSelectControlOption(input) {
       var _a, _b;
-      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key] + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
+      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + '-' + option[input.key] + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
       // <option value={option[input.key]}>{option[input.keyName]}</option>
@@ -101,12 +101,54 @@ );
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
+    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
   }
   renderTextAreaControl(input) {
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("textarea", Object.assign({ name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control text-area-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input.name), id: input.name + this.index, "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append text-area" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("textarea", Object.assign({ name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control text-area-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append text-area" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
-  handleInput(event, inputName) {
+  handleInput(event, input) {
     event.preventDefault();
     this.formError = false;
-    this.formErrors[inputName] = !event.target.validity.valid;
+    // this.formErrors[inputName] = !event.target.validity.valid;
+    let inputName = input.name;
+    this.formErrors[inputName] = false;
+    let xInput = document.getElementById(input.name + this.index);
+    let trueValidation = "";
+    let validationObject = xInput.validity ? xInput.validity : {};
+    for (const key in validationObject) {
+      if (key !== "valid" && validationObject[key]) {
+        trueValidation = key;
+        this.formError = true;
+        this.formErrors[inputName] = true;
+        switch (trueValidation) {
+          case 'patternMismatch':
+            this.formErrorsMessage[inputName] = input.validation.patternErrorMessage;
+            break;
+          case 'stepMismatch':
+            this.formErrorsMessage[inputName] = input.validation.stepErrorMessage;
+            break;
+          case 'rangeOverflow':
+            this.formErrorsMessage[inputName] = input.validation.maxErrorMessage;
+            break;
+          case 'rangeUnderflow':
+            this.formErrorsMessage[inputName] = input.validation.minErrorMessage;
+            break;
+          case 'tooLong':
+            this.formErrorsMessage[inputName] = input.validation.maxlengthErrorMessage;
+            break;
+          case 'tooShort':
+            this.formErrorsMessage[inputName] = input.validation.minlengthErrorMessage;
+            console.log(this.formErrorsMessage);
+            // this.render();
+            break;
+          case 'typeMismatch':
+            this.formErrorsMessage[inputName] = input.validation.typeMismatchErrorMessage;
+            break;
+          case 'valueMissing':
+            this.formErrorsMessage[inputName] = input.validation.requiredErrorMessage;
+            break;
+        }
+        break;
+      }
+    }
+    console.log(xInput.validity);
     setTimeout(() => {
@@ -197,6 +239,11 @@ this.formError = true;
   renderErrorMessage(input) {
-    return (h("div", { class: 'errorMessage error-' + input.name }, this.formErrorsMessage[input.name]));
+    if (this.formErrors[input.name]) {
+      return (h("div", { class: 'errorMessage error-' + input.name }, this.formErrorsMessage[input.name]));
+    }
+    else {
+      return "";
+    }
   }
   render() {
-    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: 'form-group form-type-' + input.type + ' form-name-' + input.name }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input), this.renderErrorMessage(input)))), this.renderButton()));
+    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off', id: 'app-form-' + this.index }, this.formData.map((input) => (h("div", { class: 'form-group form-type-' + input.type + ' form-name-' + input.name }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input), this.renderErrorMessage(input)))), this.renderButton()));
   }
@@ -203,0 +250,0 @@ static get watchers() { return {

dist/dynamic-form-builder/dynamic-form-builder.esm.js

@@ -1,2 +0,2 @@
-import{p as r,b as e}from"./p-daf508c1.js";export{s as setNonce}from"./p-daf508c1.js";const a=()=>{const e=import.meta.url;const a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return r(a)};a().then((r=>e([["p-3c7e69bf",[[0,"date-picker",{selectedDate:[32]}]]],["p-201613d0",[[0,"dynamic-form",{formData:[16],index:[2],isDisabled:[4,"is-disabled"],formErrors:[32],formError:[32],isFormSubmitted:[32],formErrorsMessage:[32]}]]],["p-f78500b8",[[0,"input-control",{isFormError:[4,"is-form-error"],inputData:[16]}]]],["p-830079a4",[[0,"date-picker-calendar",{selectedDate:[16],currentMonth:[32]}]]],["p-47bdd52d",[[1,"date-picker-overlay",{target:[16],displayDate:[16],showCalendar:[32]}]]]],r)));
+import{p as r,b as e}from"./p-daf508c1.js";export{s as setNonce}from"./p-daf508c1.js";const a=()=>{const e=import.meta.url;const a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return r(a)};a().then((r=>e([["p-3c7e69bf",[[0,"date-picker",{selectedDate:[32]}]]],["p-7912facf",[[0,"dynamic-form",{formData:[16],index:[2],isDisabled:[4,"is-disabled"],formErrors:[32],formError:[32],isFormSubmitted:[32],formErrorsMessage:[32]}]]],["p-f78500b8",[[0,"input-control",{isFormError:[4,"is-form-error"],inputData:[16]}]]],["p-830079a4",[[0,"date-picker-calendar",{selectedDate:[16],currentMonth:[32]}]]],["p-47bdd52d",[[1,"date-picker-overlay",{target:[16],displayDate:[16],showCalendar:[32]}]]]],r)));
 //# sourceMappingURL=dynamic-form-builder.esm.js.map

dist/esm/dynamic-form.entry.js

@@ -64,3 +64,3 @@ import { r as registerInstance, c as createEvent, h } from './index-dce6ad62.js';
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("input", Object.assign({ type: input.type, name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
@@ -70,3 +70,3 @@ renderSelectControl(input) {
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), this.generateSelectControlOption(input))));
+    return (h("div", { class: "input-group" }, h("select", { name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), disabled: this.isFormSubmitted }, h("option", { value: "" }, "Select"), this.generateSelectControlOption(input))));
   }
@@ -91,3 +91,3 @@ generateSelectControlOption(input) {
       var _a, _b;
-      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + '-' + option[input.key] + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
+      return (h("label", { class: "radio-item" }, h("input", { type: "radio", name: input.name, class: this.formErrors[input.name] ? 'radio-input border-danger' : 'radio-input', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + '-' + option[input.key] + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: option[input.key], disabled: this.isFormSubmitted }), h("div", { class: "radio-circle" }), h("div", { class: "radio-label" }, option[input.keyName]))
       // <option value={option[input.key]}>{option[input.keyName]}</option>
@@ -100,12 +100,54 @@ );
     // console.log(input);
-    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input.name), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
+    return (h("div", { class: "input-group" }, h("label", { class: this.formErrors[input.name] ? 'checkbox-item border-danger' : 'checkbox-item' }, h("input", { type: "checkbox", name: input.name, class: "checkbox-input zoom-in", required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onChange: (event) => this.handleInput(event, input), id: input.name + this.index, autoComplete: 'none', "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), "data-form-error": this.formError.toString(), value: "on", disabled: this.isFormSubmitted }), h("div", { class: "checkbox-square" }), h("div", { class: "checkbox-label" }, input.label), h("div", null, this.formErrors[input.name] ? h("span", { class: "text-danger" }, h("small", null, "mandatory")) : ''))));
   }
   renderTextAreaControl(input) {
     var _a, _b;
-    return (h("div", { class: "input-group" }, h("textarea", Object.assign({ name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control text-area-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input.name), id: input.name + this.index, "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append text-area" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
+    return (h("div", { class: "input-group" }, h("textarea", Object.assign({ name: input.name, class: this.formErrors[input.name] ? 'form-control border-danger' : 'form-control text-area-control', required: (_a = input.validation) === null || _a === void 0 ? void 0 : _a.required, onInput: (event) => this.handleInput(event, input), id: input.name + this.index, "data-error": (_b = this.formErrors[input.name]) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isFormSubmitted }, (input.validation.maxlength ? { maxlength: input.validation.maxlength } : {}), (input.validation.minlength ? { minlength: input.validation.minlength } : {}), (input.validation.pattern ? { pattern: input.validation.pattern } : {}), (input.validation.min ? { min: input.validation.min } : {}), (input.validation.max ? { max: input.validation.max } : {}))), h("div", { class: "input-group-append text-area" }, h("div", { class: "clear-box", onClick: () => this.handleClearInput(input) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", class: "clear-icon" }, h("path", { fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32", d: "M368 368L144 144M368 144L144 368" }))))));
   }
-  handleInput(event, inputName) {
+  handleInput(event, input) {
     event.preventDefault();
     this.formError = false;
-    this.formErrors[inputName] = !event.target.validity.valid;
+    // this.formErrors[inputName] = !event.target.validity.valid;
+    let inputName = input.name;
+    this.formErrors[inputName] = false;
+    let xInput = document.getElementById(input.name + this.index);
+    let trueValidation = "";
+    let validationObject = xInput.validity ? xInput.validity : {};
+    for (const key in validationObject) {
+      if (key !== "valid" && validationObject[key]) {
+        trueValidation = key;
+        this.formError = true;
+        this.formErrors[inputName] = true;
+        switch (trueValidation) {
+          case 'patternMismatch':
+            this.formErrorsMessage[inputName] = input.validation.patternErrorMessage;
+            break;
+          case 'stepMismatch':
+            this.formErrorsMessage[inputName] = input.validation.stepErrorMessage;
+            break;
+          case 'rangeOverflow':
+            this.formErrorsMessage[inputName] = input.validation.maxErrorMessage;
+            break;
+          case 'rangeUnderflow':
+            this.formErrorsMessage[inputName] = input.validation.minErrorMessage;
+            break;
+          case 'tooLong':
+            this.formErrorsMessage[inputName] = input.validation.maxlengthErrorMessage;
+            break;
+          case 'tooShort':
+            this.formErrorsMessage[inputName] = input.validation.minlengthErrorMessage;
+            console.log(this.formErrorsMessage);
+            // this.render();
+            break;
+          case 'typeMismatch':
+            this.formErrorsMessage[inputName] = input.validation.typeMismatchErrorMessage;
+            break;
+          case 'valueMissing':
+            this.formErrorsMessage[inputName] = input.validation.requiredErrorMessage;
+            break;
+        }
+        break;
+      }
+    }
+    console.log(xInput.validity);
     setTimeout(() => {
@@ -196,6 +238,11 @@ this.formError = true;
   renderErrorMessage(input) {
-    return (h("div", { class: 'errorMessage error-' + input.name }, this.formErrorsMessage[input.name]));
+    if (this.formErrors[input.name]) {
+      return (h("div", { class: 'errorMessage error-' + input.name }, this.formErrorsMessage[input.name]));
+    }
+    else {
+      return "";
+    }
   }
   render() {
-    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off' }, this.formData.map((input) => (h("div", { class: 'form-group form-type-' + input.type + ' form-name-' + input.name }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input), this.renderErrorMessage(input)))), this.renderButton()));
+    return (h("form", { onSubmit: (event) => this.handleSubmit(event), novalidate: true, autoComplete: 'off', id: 'app-form-' + this.index }, this.formData.map((input) => (h("div", { class: 'form-group form-type-' + input.type + ' form-name-' + input.name }, input.type === 'checkbox' ? '' : this.renderFormLabel(input), this.renderInputGroup(input), this.renderErrorMessage(input)))), this.renderButton()));
   }
@@ -202,0 +249,0 @@ static get watchers() { return {

dist/types/components/dynamic-form/dynamic-form.d.ts

@@ -22,3 +22,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   renderTextAreaControl(input: any): any;
-  handleInput(event: any, inputName: any): void;
+  handleInput(event: any, input: any): void;
   handleClearInput(input: any): void;
@@ -25,0 +25,0 @@ handleSubmit(event: any): string;

package.json

 {
   "name": "xconcepts-dynamic-form",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "Stencil Component Starter",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4806032

increased by0.52%

Lines of code

26114

increased by0.75%

No dependency changes