@verbb/formie-browser 1.0.1 → 1.0.3

package/src/js/modules/fields/file-upload.ts

@@ -1,9 +1,9 @@
-import fileUploadCss from '#theme/fields/_file.css?inline';
+import fileUploadCss from '#theme-css/fields/_file.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
-import { dispatchFieldEvent, getModuleFieldTarget, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
+import { dispatchFieldEvent, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
-import { getFileUploadEventName, getFormStateEventName } from '#utils/event-names';
+import { getFieldModuleEventName, getFileUploadEventName, getFormStateEventName } from '#utils/event-names';
 import { requestJson } from '#utils/http';
 
 const INPUT_SELECTOR = 'input[type="file"][data-formie-file-input]';
@@ -20,6 +20,8 @@ const FILE_VALIDATORS = [
 ] as const;
 const VALIDATOR_SCOPE = 'file-upload';
 const MODULE_ID = 'file-upload';
+const REPEATER_INIT_ROW_EVENT = getFieldModuleEventName('repeater', 'init-row');
+const FIELD_HANDLE_SELECTOR = '[data-formie-field-handle]';
 
 ensureModuleStyles(MODULE_ID, [fileUploadCss]);
 
@@ -366,6 +368,47 @@ function updateUploadedAssetInputs(field: HTMLElement, input: HTMLInputElement,
     input.value = '';
 }
 
+function getFormHandle(form: HTMLFormElement | null): string {
+    if (!form) {
+        return '';
+    }
+
+    const handleInput = form.querySelector('input[name="handle"]');
+
+    if (handleInput instanceof HTMLInputElement && handleInput.value.trim()) {
+        return handleInput.value.trim();
+    }
+
+    return form.getAttribute('data-formie-handle')?.trim() || '';
+}
+
+function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, assetIds: number[]): FormData {
+    const form = input.form;
+    const body = new FormData();
+    const handle = getFormHandle(form);
+    const fieldHandle = getFieldHandle(field);
+
+    if (handle) {
+        body.append('handle', handle);
+    }
+
+    if (fieldHandle) {
+        body.append('fieldHandle', fieldHandle);
+    }
+
+    const submissionUidInput = form?.querySelector('input[name="submissionUid"]');
+
+    if (submissionUidInput instanceof HTMLInputElement && submissionUidInput.value.trim()) {
+        body.append('submissionUid', submissionUidInput.value.trim());
+    }
+
+    assetIds.forEach((assetId) => {
+        body.append('assetIds[]', String(assetId));
+    });
+
+    return body;
+}
+
 async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement, uploadedAssets: UploadedAsset[]): Promise<UploadedAsset[]> {
     const assetIds = uploadedAssets.map((asset) => {
         return asset.assetId;
@@ -378,14 +421,9 @@ async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement
     }
 
     const hydrateEndpoint = input.getAttribute(HYDRATE_ENDPOINT_ATTR)?.trim() || '/actions/formie/file-upload/hydrate';
-    const body = new FormData();
-    assetIds.forEach((assetId) => {
-        body.append('assetIds[]', String(assetId));
-    });
-
     const response = await requestJson<FileUploadHydrateResponse>(hydrateEndpoint, {
         method: 'POST',
-        body,
+        body: buildHydrateFormData(field, input, assetIds),
     });
     const hydratedAssets = normalizeUploadedAssets(response.assets);
 
@@ -504,6 +542,118 @@ function getUploadedAssetsFromEvent(event: Event, matcher: FileUploadEventMatche
     return [];
 }
 
+function getFieldContainer(input: HTMLInputElement): HTMLElement | null {
+    const field = input.closest(FIELD_HANDLE_SELECTOR);
+
+    return field instanceof HTMLElement ? field : null;
+}
+
+function collectFileUploadInputs(root: ParentNode): HTMLInputElement[] {
+    return Array.from(root.querySelectorAll(INPUT_SELECTOR)).filter((input): input is HTMLInputElement => {
+        return input instanceof HTMLInputElement;
+    });
+}
+
+function bindFileUploadInput(field: HTMLElement, input: HTMLInputElement, form: HTMLFormElement | null): () => void {
+    const state: FileUploadState = {
+        field,
+        input,
+        summaryRoot: ensureSummaryRoot(field, input),
+        uploadedAssets: mergeUploadedAssets(
+            readUploadedAssetsFromHiddenInputs(field, input),
+            readSummaryItems(field.querySelector('[data-formie-file-summary]') as HTMLElement | null),
+        ),
+        pendingFiles: [],
+        hydrationToken: 0,
+    };
+    const syncPendingFiles = () => {
+        state.pendingFiles = Array.from(input.files || []).map((file) => {
+            return file.name;
+        });
+        renderSummary(state);
+    };
+    const syncUploadedAssets = async(uploadedAssets: UploadedAsset[]) => {
+        state.hydrationToken += 1;
+        const hydrationToken = state.hydrationToken;
+        state.pendingFiles = [];
+        state.uploadedAssets = uploadedAssets;
+        updateUploadedAssetInputs(field, input, uploadedAssets);
+        renderSummary(state);
+
+        try {
+            const hydratedAssets = await hydrateUploadedAssets(field, input, uploadedAssets);
+
+            if (hydrationToken !== state.hydrationToken) {
+                return;
+            }
+
+            state.uploadedAssets = hydratedAssets;
+            renderSummary(state);
+            dispatchFieldEvent(field, MODULE_ID, 'uploaded-assets-sync', {
+                fileUpload: field,
+                assets: hydratedAssets,
+            });
+        } catch (error) {
+            console.error('[formie] Failed to hydrate uploaded file details.', error);
+        }
+    };
+    const resetUploadedAssets = () => {
+        state.hydrationToken += 1;
+        state.pendingFiles = [];
+        state.uploadedAssets = [];
+        updateUploadedAssetInputs(field, input, []);
+        renderSummary(state);
+    };
+    const uploadedAssetHandler = (event: Event) => {
+        const fieldHandle = getFieldHandle(field);
+
+        if (!fieldHandle) {
+            return;
+        }
+
+        const uploadedAssets = getUploadedAssetsFromEvent(event, {
+            fieldHandle,
+            inputKey: getFileUploadKey(input),
+            inputName: input.name,
+            pendingFiles: state.pendingFiles,
+        });
+
+        if (!uploadedAssets.length) {
+            return;
+        }
+
+        void syncUploadedAssets(uploadedAssets);
+    };
+    const resetHandler = () => {
+        resetUploadedAssets();
+    };
+
+    input.addEventListener('change', syncPendingFiles);
+    form?.addEventListener(FILE_UPLOAD_EVENT, uploadedAssetHandler as EventListener);
+    form?.addEventListener(FORM_RESET_EVENT, resetHandler as EventListener);
+
+    const syncInitialState = () => {
+        const assetIdsFromDom = readUploadedAssetsFromHiddenInputs(field, input);
+        const summaryItems = readSummaryItems(state.summaryRoot);
+        state.uploadedAssets = mergeUploadedAssets(assetIdsFromDom, summaryItems);
+
+        if (state.uploadedAssets.some((asset) => asset.assetId && !asset.filename)) {
+            void syncUploadedAssets(state.uploadedAssets);
+            return;
+        }
+
+        renderSummary(state);
+    };
+
+    syncInitialState();
+
+    return () => {
+        input.removeEventListener('change', syncPendingFiles);
+        form?.removeEventListener(FILE_UPLOAD_EVENT, uploadedAssetHandler as EventListener);
+        form?.removeEventListener(FORM_RESET_EVENT, resetHandler as EventListener);
+    };
+}
+
 export const fileUploadModule: FormieModuleDefinition = {
     id: MODULE_ID,
     kind: 'field',
@@ -511,111 +661,53 @@ export const fileUploadModule: FormieModuleDefinition = {
         return !!ctx.target.querySelector(INPUT_SELECTOR);
     },
     setup: async(ctx) => {
-        const field = getModuleFieldTarget(ctx);
-        const scope = field || ctx.target;
-        const inputs = Array.from(scope.querySelectorAll(INPUT_SELECTOR)).filter((input): input is HTMLInputElement => {
-            return input instanceof HTMLInputElement;
-        });
         const form = ctx.form;
+        const boundInputs = new WeakSet<HTMLInputElement>();
+        const unbinds: Array<() => void> = [];
 
-        registerValidators(form);
-
-        const unbinds = inputs.map((input) => {
-            if (!(field instanceof HTMLElement)) {
-                return () => {};
-            }
-
-            const state: FileUploadState = {
-                field,
-                input,
-                summaryRoot: ensureSummaryRoot(field, input),
-                uploadedAssets: mergeUploadedAssets(
-                    readUploadedAssetsFromHiddenInputs(field, input),
-                    readSummaryItems(field.querySelector('[data-formie-file-summary]') as HTMLElement | null)
-                ),
-                pendingFiles: [],
-                hydrationToken: 0,
-            };
-            const syncPendingFiles = () => {
-                state.pendingFiles = Array.from(input.files || []).map((file) => {
-                    return file.name;
-                });
-                renderSummary(state);
-            };
-            const syncUploadedAssets = async(uploadedAssets: UploadedAsset[]) => {
-                state.hydrationToken += 1;
-                const hydrationToken = state.hydrationToken;
-                state.pendingFiles = [];
-                state.uploadedAssets = uploadedAssets;
-                updateUploadedAssetInputs(field, input, uploadedAssets);
-                renderSummary(state);
-
-                try {
-                    const hydratedAssets = await hydrateUploadedAssets(field, input, uploadedAssets);
-
-                    if (hydrationToken !== state.hydrationToken) {
-                        return;
-                    }
-
-                    state.uploadedAssets = hydratedAssets;
-                    renderSummary(state);
-                    dispatchFieldEvent(field, MODULE_ID, 'uploaded-assets-sync', {
-                        fileUpload: field,
-                        assets: hydratedAssets,
-                    });
-                } catch (error) {
-                    console.error('[formie] Failed to hydrate uploaded file details.', error);
-                }
-            };
-            const resetUploadedAssets = () => {
-                state.hydrationToken += 1;
-                state.pendingFiles = [];
-                state.uploadedAssets = [];
-                updateUploadedAssetInputs(field, input, []);
-                renderSummary(state);
-            };
-            const uploadedAssetHandler = (event: Event) => {
-                const fieldHandle = getFieldHandle(field);
-
-                if (!fieldHandle) {
+        const bindInputsInRoot = (root: ParentNode) => {
+            collectFileUploadInputs(root).forEach((input) => {
+                if (boundInputs.has(input)) {
                     return;
                 }
 
-                const uploadedAssets = getUploadedAssetsFromEvent(event, {
-                    fieldHandle,
-                    inputKey: getFileUploadKey(input),
-                    inputName: input.name,
-                    pendingFiles: state.pendingFiles,
-                });
+                const field = getFieldContainer(input);
 
-                if (!uploadedAssets.length) {
+                if (!field) {
                     return;
                 }
 
-                void syncUploadedAssets(uploadedAssets);
-            };
-            const resetHandler = () => {
-                resetUploadedAssets();
-            };
+                boundInputs.add(input);
+                unbinds.push(bindFileUploadInput(field, input, form));
+            });
+        };
+
+        registerValidators(form);
+        bindInputsInRoot(ctx.target);
 
-            input.addEventListener('change', syncPendingFiles);
-            form?.addEventListener(FILE_UPLOAD_EVENT, uploadedAssetHandler as EventListener);
-            form?.addEventListener(FORM_RESET_EVENT, resetHandler as EventListener);
-            renderSummary(state);
+        const repeaterInitRowHandler = (event: Event) => {
+            const detail = (event as CustomEvent<unknown>).detail;
 
-            return () => {
-                input.removeEventListener('change', syncPendingFiles);
-                form?.removeEventListener(FILE_UPLOAD_EVENT, uploadedAssetHandler as EventListener);
-                form?.removeEventListener(FORM_RESET_EVENT, resetHandler as EventListener);
-            };
-        });
+            if (!isRecord(detail)) {
+                return;
+            }
+
+            const row = detail.row;
+
+            if (row instanceof HTMLElement) {
+                bindInputsInRoot(row);
+            }
+        };
+
+        form?.addEventListener(REPEATER_INIT_ROW_EVENT, repeaterInitRowHandler as EventListener);
 
         await ctx.emit('formie:module:file-upload:init', {
-            count: inputs.length,
+            count: unbinds.length,
         });
 
         return {
             destroy: () => {
+                form?.removeEventListener(REPEATER_INIT_ROW_EVENT, repeaterInitRowHandler as EventListener);
                 unbinds.forEach((unbind) => {
                     unbind();
                 });

package/src/js/modules/fields/repeater.ts

@@ -1,4 +1,4 @@
-import repeaterCss from '#theme/fields/_repeater.css?inline';
+import repeaterCss from '#theme-css/fields/_repeater.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';

package/src/js/modules/fields/rich-text.ts

@@ -1,7 +1,7 @@
 import { exec, init as initPell } from 'pell';
 import pellCss from 'pell/dist/pell.min.css?inline';
-import tokensCss from '#theme/_tokens.css?inline';
-import richTextCss from '#theme/fields/_rich-text.css?inline';
+import tokensCss from '#theme-css/_tokens.css?inline';
+import richTextCss from '#theme-css/fields/_rich-text.css?inline';
 import alignCenterIcon from '#icons/rich-text/aligncenter.svg?raw';
 import alignLeftIcon from '#icons/rich-text/alignleft.svg?raw';
 import alignRightIcon from '#icons/rich-text/alignright.svg?raw';

package/src/js/modules/fields/signature.ts

@@ -1,5 +1,5 @@
 import SignaturePad from 'signature_pad';
-import signatureCss from '#theme/fields/_signature.css?inline';
+import signatureCss from '#theme-css/fields/_signature.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';

package/src/js/modules/fields/summary.ts

@@ -1,4 +1,4 @@
-import summaryCss from '#theme/fields/_summary.css?inline';
+import summaryCss from '#theme-css/fields/_summary.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';

package/src/js/modules/fields/table.ts

@@ -1,4 +1,4 @@
-import tableCss from '#theme/fields/_table.css?inline';
+import tableCss from '#theme-css/fields/_table.css?inline';
 
 import type { FormieModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getTemplateSource, getTemplateSourceHtml } from '#modules/fields/shared';

package/src/js/modules/fields/text-limit.ts

@@ -1,4 +1,4 @@
-import textLimitCss from '#theme/fields/_text-limit.css?inline';
+import textLimitCss from '#theme-css/fields/_text-limit.css?inline';
 
 import { getTextLimitMetrics } from '@verbb/formie-core';
 

package/src/js/modules/payments/paypal.ts

@@ -1,4 +1,4 @@
-import paypalCss from '#theme/integrations/_paypal.css?inline';
+import paypalCss from '#theme-css/integrations/_paypal.css?inline';
 
 import { definePaymentModule } from '#modules/payments/api';
 import { ensureModuleStyles } from '#modules/styles';

package/src/js/modules/payments/payway.ts

@@ -1,4 +1,4 @@
-import paywayCss from '#theme/integrations/_payway.css?inline';
+import paywayCss from '#theme-css/integrations/_payway.css?inline';
 
 import { definePaymentModule } from '#modules/payments/api';
 import { ensureModuleStyles } from '#modules/styles';

package/src/js/modules/payments/stripe.ts

@@ -1,4 +1,4 @@
-import stripeCss from '#theme/integrations/_stripe.css?inline';
+import stripeCss from '#theme-css/integrations/_stripe.css?inline';
 
 import { definePaymentModule } from '#modules/payments/api';
 import { ensureModuleStyles } from '#modules/styles';

package/src/js/submit/pipeline.ts

@@ -3,6 +3,7 @@ import type { FormSubmitResult } from '#contracts/schema';
 import { EventBus } from '#events/event-bus';
 import { submitForm } from '#transport/forms-api';
 import { createDebug } from '#utils/debug';
+import { getFormPages, getValidationScope } from '#validation/scope';
 import type { FormieValidator } from '#validation/validator';
 
 export type SubmitPipelineContext = {
@@ -30,32 +31,6 @@ function getAbortedResult(stage: SubmitStage, reason?: string): FormSubmitResult
     };
 }
 
-function getPages(form: HTMLFormElement): HTMLElement[] {
-    return Array.from(form.querySelectorAll('[data-formie-page]')) as HTMLElement[];
-}
-
-function getValidationScope(form: HTMLFormElement): { scope: Element; final: boolean } {
-    const pages = getPages(form);
-
-    if (!pages.length) {
-        return {
-            scope: form,
-            final: true,
-        };
-    }
-
-    // Multi-page submits validate the visible page until the user reaches the
-    // final step, where hidden earlier pages are included again.
-    const currentPage = pages.find((page) => {
-        return !page.hasAttribute('data-formie-page-hidden');
-    }) || pages[pages.length - 1];
-
-    return {
-        scope: currentPage,
-        final: currentPage === pages[pages.length - 1],
-    };
-}
-
 function isSubmittableControl(element: Element): element is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement {
     return element instanceof HTMLInputElement
         || element instanceof HTMLSelectElement
@@ -172,7 +147,7 @@ function appendMissingFieldClears(formData: FormData, fieldNames: Set<string>):
 }
 
 function buildSubmitFormData(form: HTMLFormElement, action: FormAction): FormData {
-    const pages = getPages(form);
+    const pages = getFormPages(form);
     const currentPage = pages.find((page) => {
         return !page.hasAttribute('data-formie-page-hidden');
     }) || null;
@@ -200,7 +175,7 @@ function isFinalSubmitAttempt(form: HTMLFormElement, action: FormAction): boolea
         return false;
     }
 
-    const pages = getPages(form);
+    const pages = getFormPages(form);
 
     if (!pages.length) {
         return true;

package/src/js/validation/scope.ts

@@ -0,0 +1,25 @@
+export function getFormPages(form: HTMLFormElement): HTMLElement[] {
+    return Array.from(form.querySelectorAll('[data-formie-page]')) as HTMLElement[];
+}
+
+export function getValidationScope(form: HTMLFormElement): { scope: Element; final: boolean } {
+    const pages = getFormPages(form);
+
+    if (!pages.length) {
+        return {
+            scope: form,
+            final: true,
+        };
+    }
+
+    // Multi-page submits validate the visible page until the user reaches the
+    // final step, where hidden earlier pages are included again.
+    const currentPage = pages.find((page) => {
+        return !page.hasAttribute('data-formie-page-hidden');
+    }) || pages[pages.length - 1];
+
+    return {
+        scope: currentPage,
+        final: currentPage === pages[pages.length - 1],
+    };
+}

package/src/js/validation/submit-readiness.ts

@@ -0,0 +1,157 @@
+import { getValidationScope } from '#validation/scope';
+import type { FormieValidator } from '#validation/validator';
+
+const SUBMIT_VALIDATION_DISABLED_ATTR = 'data-formie-submit-validation-disabled';
+const PRESERVED_DISABLED_ATTR = 'data-formie-preserve-disabled';
+const SUBMIT_READY_ATTR = 'data-formie-submit-ready';
+
+function isSubmitReadinessEnabled(form: HTMLFormElement): boolean {
+    return form.dataset.formieDisableSubmitUntilValid === 'true';
+}
+
+function getPrimarySubmitButtons(form: HTMLFormElement): HTMLButtonElement[] {
+    return Array.from(form.querySelectorAll('button[data-formie-action="submit"]')).filter((button): button is HTMLButtonElement => {
+        return button instanceof HTMLButtonElement;
+    });
+}
+
+function isSubmitButtonVisible(button: HTMLButtonElement): boolean {
+    return !button.hasAttribute('data-formie-conditionally-hidden')
+        && !button.closest('[data-formie-conditionally-hidden]');
+}
+
+export function syncSubmitReadiness(form: HTMLFormElement, validator: FormieValidator): void {
+    if (!isSubmitReadinessEnabled(form)) {
+        return;
+    }
+
+    if (form.getAttribute('data-formie-loading') === 'true') {
+        return;
+    }
+
+    const { scope, final } = getValidationScope(form);
+    const isReady = validator.isValid(scope, {
+        includeHiddenPages: final,
+    });
+
+    form.setAttribute(SUBMIT_READY_ATTR, isReady ? 'true' : 'false');
+
+    getPrimarySubmitButtons(form).forEach((button) => {
+        if (!isSubmitButtonVisible(button)) {
+            return;
+        }
+
+        if (isReady) {
+            if (!button.hasAttribute(SUBMIT_VALIDATION_DISABLED_ATTR)) {
+                return;
+            }
+
+            if (button.hasAttribute(PRESERVED_DISABLED_ATTR)) {
+                button.disabled = true;
+                button.removeAttribute(PRESERVED_DISABLED_ATTR);
+            } else {
+                button.disabled = false;
+            }
+
+            button.removeAttribute(SUBMIT_VALIDATION_DISABLED_ATTR);
+            return;
+        }
+
+        if (!button.hasAttribute(SUBMIT_VALIDATION_DISABLED_ATTR)) {
+            if (button.disabled) {
+                button.setAttribute(PRESERVED_DISABLED_ATTR, 'true');
+            }
+
+            button.setAttribute(SUBMIT_VALIDATION_DISABLED_ATTR, 'true');
+        }
+
+        button.disabled = true;
+    });
+}
+
+export function bindSubmitReadiness(
+    form: HTMLFormElement,
+    validator: FormieValidator,
+    target: Element,
+): () => void {
+    if (!isSubmitReadinessEnabled(form)) {
+        return () => {};
+    }
+
+    let syncQueued = false;
+
+    const scheduleSync = (): void => {
+        if (syncQueued) {
+            return;
+        }
+
+        syncQueued = true;
+
+        queueMicrotask(() => {
+            syncQueued = false;
+            syncSubmitReadiness(form, validator);
+        });
+    };
+
+    scheduleSync();
+
+    const inputHandler = (): void => {
+        scheduleSync();
+    };
+
+    form.addEventListener('input', inputHandler, true);
+    form.addEventListener('change', inputHandler, true);
+
+    const resetHandler = (): void => {
+        window.setTimeout(() => {
+            scheduleSync();
+        }, 0);
+    };
+
+    form.addEventListener('reset', resetHandler);
+
+    const conditionsHandler = (): void => {
+        scheduleSync();
+    };
+
+    target.addEventListener('formie:conditions:evaluated', conditionsHandler as EventListener);
+
+    const observer = new MutationObserver((mutations) => {
+        const shouldSync = mutations.some((mutation) => {
+            if (mutation.type === 'attributes') {
+                const attributeName = mutation.attributeName || '';
+
+                return attributeName === 'data-formie-page-hidden'
+                    || attributeName === 'data-formie-conditionally-hidden'
+                    || attributeName === 'data-formie-loading'
+                    || attributeName === 'disabled';
+            }
+
+            return mutation.type === 'childList';
+        });
+
+        if (shouldSync) {
+            scheduleSync();
+        }
+    });
+
+    observer.observe(form, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: [
+            'data-formie-page-hidden',
+            'data-formie-conditionally-hidden',
+            'data-formie-loading',
+            'disabled',
+        ],
+    });
+
+    return () => {
+        form.removeEventListener('input', inputHandler, true);
+        form.removeEventListener('change', inputHandler, true);
+        form.removeEventListener('reset', resetHandler);
+        target.removeEventListener('formie:conditions:evaluated', conditionsHandler as EventListener);
+        observer.disconnect();
+    };
+}

package/src/js/validation/validator.ts

@@ -176,6 +176,10 @@ export class FormieValidator {
         return this.submitted || this.activated.has(input);
     }
 
+    isValid(inputOrSelector: Element | null = null, options: ValidateOptions = {}): boolean {
+        return this.validate(inputOrSelector, options).length === 0;
+    }
+
     validate(inputOrSelector: Element | null = null, options: ValidateOptions = {}): ValidationError[] {
         this.errors = [];