@formio/js 5.0.0-dev.5944.74e70b0 → 5.0.0-dev.5947.acce78f

package/lib/mjs/components/_classes/component/Component.js

@@ -6,7 +6,7 @@ import isMobile from 'ismobilejs';
 import { processOne, processOneSync, validateProcessInfo } from '@formio/core/process';
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
-import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone, getScriptPlugin } from '../../../utils/utils';
+import { fastCloneDeep, boolValue, isInsideScopingComponent, currentTimezone, getScriptPlugin, getContextualRowData } from '../../../utils/utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
 import Widgets from '../../../widgets';
@@ -221,6 +221,10 @@ export default class Component extends Element {
          * @private
          */
         this._hasCondition = null;
+        /**
+         * The row index for this component.
+         */
+        this._rowIndex = undefined;
         /**
          * References to dom elements
          */
@@ -231,11 +235,6 @@ export default class Component extends Element {
             this.options.components[component.type]) {
             _.merge(component, this.options.components[component.type]);
         }
-        /**
-         * The data path to this specific component instance.
-         * @type {string}
-         */
-        this.path = component?.key || '';
         /**
          * An array of all the children components errors.
          */
@@ -304,6 +303,14 @@ export default class Component extends Element {
          * @type {Component}
          */
         this.parent = this.options.parent;
+        /**
+         * The component paths for this component.
+         * @type {import('@formio/core').ComponentPaths} - The component paths.
+         */
+        this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
+            ...this.parent?.paths,
+            dataIndex: this.options.rowIndex === undefined ? this.parent?.paths?.dataIndex : this.options.rowIndex
+        });
         this.options.name = this.options.name || 'data';
         this._path = '';
         // Needs for Nextgen Rules Engine
@@ -409,12 +416,7 @@ export default class Component extends Element {
     }
     /* eslint-enable max-statements */
     get componentsMap() {
-        if (this.localRoot?.childComponentsMap) {
-            return this.localRoot.childComponentsMap;
-        }
-        const localMap = {};
-        localMap[this.path] = this;
-        return localMap;
+        return this.root?.childComponentsMap || {};
     }
     get data() {
         return this._data;
@@ -460,6 +462,25 @@ export default class Component extends Element {
             this.component.addons.forEach((addon) => this.createAddon(addon));
         }
     }
+    /**
+     * Get Row Index.
+     * @returns {number} - The row index.
+     */
+    get rowIndex() {
+        return this._rowIndex;
+    }
+    /**
+     * Set Row Index to row and update each component.
+     * @param {number} value - The row index.
+     * @returns {void}
+     */
+    set rowIndex(value) {
+        this.paths = FormioUtils.getComponentPaths(this.component, this.parent?.component, {
+            ...(this.parent?.paths || {}),
+            ...{ dataIndex: value }
+        });
+        this._rowIndex = value;
+    }
     afterComponentAssign() {
         //implement in extended classes
     }
@@ -528,6 +549,12 @@ export default class Component extends Element {
     get key() {
         return _.get(this.component, 'key', '');
     }
+    get path() {
+        return this.paths.dataPath;
+    }
+    set path(path) {
+        throw new Error('Should not be setting the path of a component.');
+    }
     set parentVisible(value) {
         this._parentVisible = value;
     }
@@ -1246,7 +1273,7 @@ export default class Component extends Element {
         if (refreshData === 'data') {
             this.refresh(this.data, changed, flags);
         }
-        else if ((changePath && getComponentPath(changed.instance) === refreshData) && changed && changed.instance &&
+        else if ((changePath && (changed.instance?.paths?.localPath === refreshData)) && changed && changed.instance &&
             // Make sure the changed component is not in a different "context". Solves issues where refreshOn being set
             // in fields inside EditGrids could alter their state from other rows (which is bad).
             this.inContext(changed.instance)) {
@@ -2857,6 +2884,9 @@ export default class Component extends Element {
      * @returns {string} - The message to show when the component is invalid.
      */
     invalidMessage(data, dirty, ignoreCondition, row) {
+        if (!row) {
+            row = getContextualRowData(this.component, data, this.paths);
+        }
         if (!ignoreCondition && !this.checkCondition(row, data)) {
             return '';
         }
@@ -2874,6 +2904,8 @@ export default class Component extends Element {
             data,
             row,
             path: this.path || this.component.key,
+            parent: this.parent?.component,
+            paths: this.paths,
             scope: validationScope,
             instance: this,
             processors: [
@@ -2926,7 +2958,7 @@ export default class Component extends Element {
         if (flags.silentCheck) {
             return [];
         }
-        let isDirty = this.dirty || flags.dirty;
+        let isDirty = (flags.dirty === false) ? false : (this.dirty || flags.dirty);
         if (this.options.alwaysDirty) {
             isDirty = true;
         }
@@ -2951,7 +2983,10 @@ export default class Component extends Element {
             component: this.component,
             data,
             row,
+            local: !!flags.local,
             value: this.validationValue,
+            parent: this.parent?.component,
+            paths: this.paths,
             path: this.path || this.component.key,
             instance: this,
             form: this.root ? this.root._form : {},

package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts

@@ -22,6 +22,7 @@ export default class ComponentModal {
         modalOverlay: string;
         modalContents: string;
         modalClose: string;
+        componentContent: string;
         openModalWrapper: string;
         openModal: string;
         modalSave: string;

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -61,6 +61,7 @@ export default class ComponentModal {
             modalOverlay: 'single',
             modalContents: 'single',
             modalClose: 'single',
+            componentContent: 'single',
             openModalWrapper: 'single',
             openModal: 'single',
             modalSave: 'single',

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -56,18 +56,6 @@ export default class NestedComponent extends Field {
      * @returns {object} - The current form object.
      */
     get currentForm(): object;
-    /**
-     * Set Row Index to row and update each component.
-     * @param {number} value - The row index.
-     * @returns {void}
-     */
-    set rowIndex(value: number);
-    /**
-     * Get Row Index.
-     * @returns {number} - The row index.
-     */
-    get rowIndex(): number;
-    _rowIndex: number | undefined;
     /**
      * Get Contextual data of the component.
      * @returns {object} - The contextual data of the component.
@@ -115,14 +103,11 @@ export default class NestedComponent extends Field {
      */
     eachComponent(fn: Function): void;
     /**
-     * Returns a component provided a key. This performs a deep search within the
-     * component tree.
+     * Returns a component provided a key. This performs a deep search within the component tree.
      * @param {string} path - The path to the component.
-     * @param {Function} [fn] - Called with the component once found.
-     * @param {string} [originalPath] - The original path to the component.
      * @returns {any} - The component that is located.
      */
-    getComponent(path: string, fn?: Function | undefined, originalPath?: string | undefined): any;
+    getComponent(path: string): any;
     /**
      * Return a component provided the Id of the component.
      * @param {string} id - The Id of the component.
@@ -211,12 +196,12 @@ export default class NestedComponent extends Field {
     calculateValue(data: any, flags: any, row: any): any;
     isLastPage(): boolean;
     isValid(data: any, dirty: any): any;
-    validationProcessor({ scope, data, row, instance, component }: {
+    validationProcessor({ scope, data, row, instance, paths }: {
         scope: any;
         data: any;
         row: any;
         instance: any;
-        component: any;
+        paths: any;
     }, flags: any): void;
     /**
      * Perform a validation on all child components of this nested component.

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -2,7 +2,8 @@
 import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
-import { getArrayFromComponentPath, getStringFromComponentPath, getRandomComponentId } from '../../../utils/utils';
+'';
+import { getComponentPaths, getRandomComponentId, componentMatches, getBestMatch, getStringFromComponentPath } from '../../../utils/utils';
 import { process as processAsync, processSync } from '@formio/core/process';
 /**
  * NestedComponent class.
@@ -198,6 +199,10 @@ export default class NestedComponent extends Field {
      */
     set rowIndex(value) {
         this._rowIndex = value;
+        this.paths = getComponentPaths(this.component, this.parent?.component, {
+            ...(this.parent?.paths || {}),
+            ...{ dataIndex: value }
+        });
         this.eachComponent((component) => {
             component.rowIndex = value;
         });
@@ -293,56 +298,36 @@ export default class NestedComponent extends Field {
         });
     }
     /**
-     * Returns a component provided a key. This performs a deep search within the
-     * component tree.
+     * Returns a component provided a key. This performs a deep search within the component tree.
      * @param {string} path - The path to the component.
-     * @param {Function} [fn] - Called with the component once found.
-     * @param {string} [originalPath] - The original path to the component.
      * @returns {any} - The component that is located.
      */
-    getComponent(path, fn, originalPath) {
-        originalPath = originalPath || getStringFromComponentPath(path);
-        if (this.componentsMap.hasOwnProperty(originalPath)) {
-            if (fn) {
-                return fn(this.componentsMap[originalPath]);
-            }
-            else {
-                return this.componentsMap[originalPath];
-            }
-        }
-        path = getArrayFromComponentPath(path);
-        const pathStr = originalPath;
-        const newPath = _.clone(path);
-        let key = newPath.shift();
-        const remainingPath = newPath;
-        let comp = null;
-        let possibleComp = null;
-        if (_.isNumber(key)) {
-            key = remainingPath.shift();
-        }
-        if (!_.isString(key)) {
-            return comp;
-        }
-        this.everyComponent((component, components) => {
-            const matchPath = component.hasInput && component.path ? pathStr.includes(component.path) : true;
-            if (component.component.key === key) {
-                possibleComp = component;
-                if (matchPath) {
-                    comp = component;
-                    if (remainingPath.length > 0 && 'getComponent' in component) {
-                        comp = component.getComponent(remainingPath, fn, originalPath);
-                    }
-                    else if (fn) {
-                        fn(component, components);
-                    }
-                    return false;
-                }
-            }
+    getComponent(path) {
+        path = getStringFromComponentPath(path);
+        const matches = {
+            path: undefined,
+            fullPath: undefined,
+            localPath: undefined,
+            fullLocalPath: undefined,
+            dataPath: undefined,
+            localDataPath: undefined,
+            key: undefined,
+        };
+        this.everyComponent((component) => {
+            // All searches are relative to this component so replace this path from the child paths.
+            componentMatches(component.component, {
+                path: component.paths?.path?.replace(new RegExp(`^${this.paths?.path}\\.?`), ''),
+                fullPath: component.paths?.fullPath?.replace(new RegExp(`^${this.paths?.fullPath}\\.?`), ''),
+                localPath: component.paths?.localPath?.replace(new RegExp(`^${this.paths?.localPath}\\.?`), ''),
+                fullLocalPath: component.paths?.fullLocalPath?.replace(new RegExp(`^${this.paths?.fullLocalPath}\\.?`), ''),
+                dataPath: component.paths?.dataPath?.replace(new RegExp(`^${this.paths?.dataPath}\\.?`), ''),
+                localDataPath: component.paths?.localDataPath?.replace(new RegExp(`^${this.paths?.localDataPath}\\.?`), ''),
+            }, path, this.rowIndex, matches, (type, match) => {
+                match.instance = component;
+                return match;
+            });
         });
-        if (!comp) {
-            comp = possibleComp;
-        }
-        return comp;
+        return getBestMatch(matches)?.instance;
     }
     /**
      * Return a component provided the Id of the component.
@@ -678,19 +663,16 @@ export default class NestedComponent extends Field {
     isValid(data, dirty) {
         return this.getComponents().reduce((valid, comp) => comp.isValid(data, dirty) && valid, super.isValid(data, dirty));
     }
-    validationProcessor({ scope, data, row, instance, component }, flags) {
+    validationProcessor({ scope, data, row, instance, paths }, flags) {
         const { dirty } = flags;
         if (this.root.hasExtraPages && this.page !== this.root.page) {
-            instance = this.childComponentsMap?.hasOwnProperty(component.path)
-                ? this.childComponentsMap[component.path]
-                : this.getComponent(component.path);
+            instance = this.componentsMap?.hasOwnProperty(paths.dataPath)
+                ? this.componentsMap[paths.dataPath]
+                : this.getComponent(paths.dataPath);
         }
         if (!instance) {
             return;
         }
-        if (!instance.component.path) {
-            instance.component.path = component.path;
-        }
         instance.checkComponentValidity(data, dirty, row, flags, scope.errors);
         if (instance.processOwnValidation) {
             scope.noRecurse = true;
@@ -722,7 +704,10 @@ export default class NestedComponent extends Field {
             components,
             instances: this.componentsMap,
             data: data,
+            local: !!flags.local,
             scope: { errors: [] },
+            parent: this.component,
+            parentPaths: this.paths,
             processors: [
                 {
                     process: validationProcessorProcess,

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -2,6 +2,8 @@ export default class NestedArrayComponent extends NestedDataComponent {
     static savedValueTypes(): string[];
     componentContext(component: any): any;
     get iteratableRows(): void;
+    set rowIndex(value: number | undefined);
+    get rowIndex(): number | undefined;
     prevHasAddButton: any;
     checkAddButtonChanged(): void;
     checkData(data: any, flags: any, row: any): any;
@@ -10,7 +12,6 @@ export default class NestedArrayComponent extends NestedDataComponent {
     checkRow(...args: any[]): any;
     processRow(method: any, data: any, opts: any, row: any, components: any, silentCheck: any): any;
     hasAddButton(): any;
-    getComponent(path: any, fn: any, originalPath: any): any;
     everyComponent(fn: any, rowIndex: any, options?: {}): void;
     _getEmailTableHeader(options: any): string;
     _getEmailTableBody(options: any): string;

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -1,6 +1,8 @@
 'use strict';
 import _ from 'lodash';
-import { componentValueTypes, getStringFromComponentPath, isLayoutComponent } from '../../../utils/utils';
+import { Utils } from '@formio/core/utils';
+const { getComponentPaths } = Utils;
+import { componentValueTypes, isLayoutComponent } from '../../../utils/utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {
@@ -19,9 +21,13 @@ export default class NestedArrayComponent extends NestedDataComponent {
         throw new Error('Getter #iteratableRows() is not implemented');
     }
     get rowIndex() {
-        return super.rowIndex;
+        return this._rowIndex;
     }
     set rowIndex(value) {
+        this.paths = getComponentPaths(this.component, this.parent?.component, {
+            ...(this.parent?.paths || {}),
+            ...{ dataIndex: value }
+        });
         this._rowIndex = value;
     }
     init() {
@@ -84,47 +90,6 @@ export default class NestedArrayComponent extends NestedDataComponent {
                 value: this.dataValue,
             }, 'show'));
     }
-    getComponent(path, fn, originalPath) {
-        originalPath = originalPath || getStringFromComponentPath(path);
-        if (this.componentsMap.hasOwnProperty(originalPath)) {
-            if (fn) {
-                return fn(this.componentsMap[originalPath]);
-            }
-            else {
-                return this.componentsMap[originalPath];
-            }
-        }
-        path = Array.isArray(path) ? path : [path];
-        let key = path.shift();
-        const remainingPath = path;
-        let result = [];
-        let possibleComp = null;
-        let comp = null;
-        let rowIndex = null;
-        if (_.isNumber(key)) {
-            rowIndex = key;
-            key = remainingPath.shift();
-        }
-        if (!_.isString(key)) {
-            return result;
-        }
-        this.everyComponent((component, components) => {
-            if (component.component.key === key) {
-                possibleComp = component;
-                if (remainingPath.length > 0 && 'getComponent' in component) {
-                    comp = component.getComponent(remainingPath, fn, originalPath);
-                }
-                else if (fn) {
-                    fn(component, components);
-                }
-                result = rowIndex !== null ? comp : result.concat(comp || possibleComp);
-            }
-        }, rowIndex);
-        if ((!result || result.length === 0) && possibleComp) {
-            result = rowIndex !== null ? possibleComp : [possibleComp];
-        }
-        return result;
-    }
     everyComponent(fn, rowIndex, options = {}) {
         if (_.isObject(rowIndex)) {
             options = rowIndex;

package/lib/mjs/components/datagrid/DataGrid.d.ts

@@ -87,7 +87,6 @@ export default class DataGridComponent extends NestedArrayComponent {
         show: boolean;
     };
     checkComponentConditions(data: any, flags: any, row: any): boolean;
-    getComponent(path: any, fn: any): any;
     toggleGroup(element: any, index: any): void;
 }
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';

package/lib/mjs/components/datagrid/DataGrid.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import NestedArrayComponent from '../_classes/nestedarray/NestedArrayComponent';
 import { fastCloneDeep, getFocusableElements } from '../../utils/utils';
-import Components from '../Components';
 export default class DataGridComponent extends NestedArrayComponent {
     static schema(...extend) {
         return NestedArrayComponent.schema({
@@ -422,7 +421,6 @@ export default class DataGridComponent extends NestedArrayComponent {
             }
             component.rowIndex = rowIndex;
             component.row = `${rowIndex}-${colIndex}`;
-            component.path = Components.getComponentPath(component);
         });
     }
     updateRowsComponents(rowIndex) {
@@ -488,6 +486,7 @@ export default class DataGridComponent extends NestedArrayComponent {
             const options = _.clone(this.options);
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
+            options.rowIndex = rowIndex;
             let columnComponent;
             if (this.builderMode) {
                 col.id = col.id + rowIndex;
@@ -610,49 +609,6 @@ export default class DataGridComponent extends NestedArrayComponent {
     restoreComponentsContext() {
         this.rows.forEach((row, index) => _.forIn(row, (component) => component.data = this.dataValue[index]));
     }
-    getComponent(path, fn) {
-        path = Array.isArray(path) ? path : [path];
-        const [key, ...remainingPath] = path;
-        let result = [];
-        if (_.isNumber(key) && remainingPath.length) {
-            const compKey = remainingPath.pop();
-            result = this.rows[key][compKey];
-            // If the component is inside a Layout Component, try to find it among all the row's components
-            if (!result) {
-                Object.entries(this.rows[key]).forEach(([, comp]) => {
-                    if ('getComponent' in comp) {
-                        const possibleResult = comp.getComponent([compKey], fn);
-                        if (possibleResult) {
-                            result = possibleResult;
-                        }
-                    }
-                });
-            }
-            if (result && _.isFunction(fn)) {
-                fn(result, this.getComponents());
-            }
-            if (remainingPath.length && 'getComponent' in result) {
-                return result.getComponent(remainingPath, fn);
-            }
-            return result;
-        }
-        if (!_.isString(key)) {
-            return result;
-        }
-        this.everyComponent((component, components) => {
-            if (component.component.key === key) {
-                let comp = component;
-                if (remainingPath.length > 0 && 'getComponent' in component) {
-                    comp = component.getComponent(remainingPath, fn);
-                }
-                else if (fn) {
-                    fn(component, components);
-                }
-                result = result.concat(comp);
-            }
-        });
-        return result.length > 0 ? result : null;
-    }
     toggleGroup(element, index) {
         element.classList.toggle('collapsed');
         _.each(this.refs.chunks[index], row => {

package/lib/mjs/components/datamap/DataMap.js

@@ -3,7 +3,6 @@ import DataGridComponent from '../datagrid/DataGrid';
 import _ from 'lodash';
 import EventEmitter from 'eventemitter3';
 import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
-import Components from '../Components';
 export default class DataMapComponent extends DataGridComponent {
     static schema(...extend) {
         return Component.schema({
@@ -227,6 +226,7 @@ export default class DataMapComponent extends DataGridComponent {
         options.events = new EventEmitter();
         options.name += `[${rowIndex}]`;
         options.row = `${rowIndex}`;
+        options.rowIndex = rowIndex;
         const components = {};
         components['__key'] = this.createComponent(this.keySchema, options, { __key: this.builderMode ? this.defaultRowKey : key });
         components['__key'].on('componentChange', (event) => {
@@ -236,7 +236,6 @@ export default class DataMapComponent extends DataGridComponent {
             delete dataValue[key];
             const comp = components[this.valueKey];
             comp.component.key = newKey;
-            comp.path = Components.getComponentPath(comp);
             key = newKey;
         });
         const valueComponent = _.clone(this.component.valueComponent);

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -43,7 +43,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     get defaultValue(): any[];
     hasRemoveButtons(): boolean;
     editRows: any;
-    checkRowVariableTypeComponents(editRow: any, rowIndex: any): boolean;
+    checkRowVariableTypeComponents(editRow: any, rowIndex: any): void;
     setVariableTypeComponents(): void;
     variableTypeComponentsIndexes: any[] | undefined;
     isOpen(editRow: any): boolean;

package/lib/mjs/components/editgrid/EditGrid.js

@@ -289,15 +289,12 @@ export default class EditGridComponent extends NestedArrayComponent {
     }
     checkRowVariableTypeComponents(editRow, rowIndex) {
         const rowComponents = editRow.components;
-        let typeChanged = false;
         if (_.some(this.variableTypeComponentsIndexes, (compIndex) => {
             const variableTypeComp = rowComponents[compIndex];
             return variableTypeComp.type !== variableTypeComp.component.type;
         })) {
             editRow.components = this.createRowComponents(editRow.data, rowIndex, true);
-            typeChanged = true;
         }
-        return typeChanged;
     }
     setVariableTypeComponents() {
         //set components which type is changing within a row (e.g.,by mergeComponentSchema action)
@@ -926,6 +923,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             const options = _.clone(this.options);
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
+            options.rowIndex = rowIndex;
             options.onChange = (flags = {}, changed, modified) => {
                 if (changed.instance.root?.id && (this.root?.id !== changed.instance.root.id)) {
                     changed.instance.root.triggerChange(flags, changed, modified);
@@ -942,13 +940,11 @@ export default class EditGridComponent extends NestedArrayComponent {
                         ...flags,
                         changed,
                     }, editRow.data, editRow.components);
-                    this.validateRow(editRow, false);
+                    this.validateRow(editRow, false, false);
                 }
                 if (this.variableTypeComponentsIndexes.length) {
-                    const typeChanged = this.checkRowVariableTypeComponents(editRow, rowIndex);
-                    if (typeChanged) {
-                        this.redraw();
-                    }
+                    this.checkRowVariableTypeComponents(editRow, rowIndex);
+                    this.redraw();
                 }
             };
             const comp = this.createComponent(_.assign({}, column, { row: options.row }), options, row, null, recreatePartially && currentRowComponents ? currentRowComponents[colIndex] : null);
@@ -984,22 +980,24 @@ export default class EditGridComponent extends NestedArrayComponent {
     validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {
         editRow.errors = [];
         if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {
-            const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
+            const silentCheck = forceSilentCheck === false ? false : ((this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck);
             const rootValue = fastCloneDeep(this.rootValue);
             const editGridValue = _.get(rootValue, this.path, []);
             editGridValue[editRow.rowIndex] = editRow.data;
             _.set(rootValue, this.path, editGridValue);
             const validationProcessorProcess = (context) => this.validationProcessor(context, { dirty, silentCheck });
             const errors = processSync({
-                components: fastCloneDeep(this.component.components).map((component) => {
-                    component.parentPath = `${this.path}[${editRow.rowIndex}]`;
-                    return component;
-                }),
+                components: this.component.components,
                 data: rootValue,
                 row: editRow.data,
                 process: 'validateRow',
                 instances: this.componentsMap,
                 scope: { errors: [] },
+                parent: this.component,
+                parentPaths: {
+                    ...this.paths,
+                    dataIndex: editRow.rowIndex
+                },
                 processors: [
                     {
                         process: validationProcessorProcess,
@@ -1031,9 +1029,12 @@ export default class EditGridComponent extends NestedArrayComponent {
                 });
             }
         }
-        if (!this.component.rowDrafts || this.root?.submitted) {
+        if (editRow.alerts && (!this.component.rowDrafts || this.root?.submitted)) {
             this.showRowErrorAlerts(editRow, editRow.errors);
         }
+        else if (editRow.errors?.length) {
+            this.setCustomValidity(editRow.errors, dirty);
+        }
         return editRow.errors;
     }
     showRowErrorAlerts(editRow, errors) {

package/lib/mjs/components/form/Form.d.ts

@@ -21,7 +21,7 @@ export default class FormComponent extends Component {
     get useOriginalRevision(): any;
     setFormRevision(rev: any): void;
     subFormRevision: any;
-    getComponent(path: any, fn: any): any;
+    getComponent(path: any): any;
     getSubOptions(options?: {}): {};
     render(): string;
     asString(value: any): any;
@@ -55,8 +55,6 @@ export default class FormComponent extends Component {
      */
     loadSubForm(fromAttach: boolean): Promise<any>;
     subFormLoading: boolean | undefined;
-    get subFormData(): any;
-    checkComponentValidity(data: any, dirty: any, row: any, options: any, errors?: any[]): any;
     checkComponentConditions(data: any, flags: any, row: any): any;
     calculateValue(data: any, flags: any, row: any): any;
     setPristine(pristine: any): void;