diff --git a/src/FormManager.full.ts b/src/FormManager.full.ts index f20cdb4..f791940 100644 --- a/src/FormManager.full.ts +++ b/src/FormManager.full.ts @@ -9,6 +9,7 @@ import DefaultAttribute from './attributes/DefaultAttribute' import AutosetAttribute from './attributes/AutosetAttribute' import CheckboxInput from './modules/CheckboxInput' import NumberInput from './modules/NumberInput' +import ErrorAttribute from './attributes/ErrorAttribute' /** * This class is Mainly used for (non-npm) browser usage as it contains every buitins extensions @@ -21,19 +22,20 @@ export default class fm extends FormManager { public constructor(form: HTMLFormElement) { super(form) this.assign( + CheckboxInput, DatalistInput, DateInput, + NumberInput, RepeatInput, SelectInput, - CheckboxInput, - NumberInput, ) this.setupInputs() this.attributeManager.register( - RegexAttribute, - IgnoreAttribute, - DefaultAttribute, AutosetAttribute, + DefaultAttribute, + ErrorAttribute, + IgnoreAttribute, + RegexAttribute, ) this.attributeManager.setup() } diff --git a/src/FormManager.ts b/src/FormManager.ts index 80b45ec..bd19ba9 100644 --- a/src/FormManager.ts +++ b/src/FormManager.ts @@ -65,14 +65,14 @@ export default class FormManager { * @param {HTMLFormElement} form the form HTMLElement * @memberof FormManager */ - public constructor(form: HTMLFormElement, onSubmit?: (ev: Event) => void) { + public constructor(form: HTMLFormElement, onSubmit?: (fm: FormManager) => void) { this.form = form this.attributeManager = new AttributesManager(this) //Prevent default submit action form.addEventListener("submit", (e: Event) => { e.preventDefault() - onSubmit && onSubmit(e) + onSubmit && onSubmit(this) }) //assign default form interface diff --git a/src/attributes/IgnoreAttribute.ts b/src/attributes/IgnoreAttribute.ts index ec77f02..45e833d 100644 --- a/src/attributes/IgnoreAttribute.ts +++ b/src/attributes/IgnoreAttribute.ts @@ -36,6 +36,5 @@ extends AbstractAttribute { public static identity: AttributeIdentity = { attribute: IgnoreAttribute, dataElement: "data-ignore" - } } diff --git a/src/attributes/RegexAttribute.ts b/src/attributes/RegexAttribute.ts index bfd345e..8b06363 100644 --- a/src/attributes/RegexAttribute.ts +++ b/src/attributes/RegexAttribute.ts @@ -7,9 +7,10 @@ extends AbstractAttribute { public trigger(): boolean { const regStr = this.input.element.dataset.regex if (!regStr) return true + const regex = new RegExp(regStr, "g") const test = this.input.getValue() + "" - console.log(test) + return regex.test(test) } diff --git a/src/modules/SelectInput.ts b/src/modules/SelectInput.ts index fb6c71e..df8d65a 100644 --- a/src/modules/SelectInput.ts +++ b/src/modules/SelectInput.ts @@ -1,14 +1,36 @@ import InputIdentity from './Interfaces/InputIdentity'; import DefaultInput from './DefaultInput'; import { realType } from '../Functions'; +import FormManager from '../FormManager'; -/** - * - * @class FMDateInput - * @extends {FMInput} - */ export default class SelectInput extends DefaultInput { + public constructor(element: HTMLSelectElement, form: FormManager) { + super(element, form) + if (element.dataset.filterElement) { + const options = element.querySelectorAll('option') + const el = form.form.querySelector(`[name="${element.dataset.filterElement}"]`) + if (!el) { + console.warn(`Select Input has filter Attr but can't find the element (${element.dataset.filterElement})`) + } else { + const fn = () => { + options.forEach((opt) => { + if (opt.dataset.filter === el.value || opt.dataset.filter === undefined) { + opt.removeAttribute('style') + } else { + opt.style.display = 'none' + if (this.formatValue(opt.value) === this.getValue()) { + this.setValue(undefined) + } + } + }) + } + el.addEventListener('change', fn) + fn() + } + } + } + public setValue(value: any) { this.element.value = this.formatValue(value) } @@ -25,7 +47,7 @@ export default class SelectInput extends DefaultInput { } public static identity: InputIdentity = { - input: SelectInput, + input: SelectInput as any, tagName: "select" } }