@formio/js 5.0.0-rc.27 → 5.0.0-rc.28

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

@@ -3,9 +3,9 @@ import { conformToMask } from '@formio/vanilla-text-mask';
 import tippy from 'tippy.js';
 import _ from 'lodash';
 import isMobile from 'ismobilejs';
+import { processOne, processOneSync, validateProcess, validateProcessSync } from '@formio/core';
 import { Formio } from '../../../Formio';
 import * as FormioUtils from '../../../utils/utils';
-import Validator from '../../../validator/Validator';
 import { fastCloneDeep, boolValue, getComponentPath, isInsideScopingComponent, currentTimezone } from '../../../utils/utils';
 import Element from '../../../Element';
 import ComponentModal from '../componentModal/ComponentModal';
@@ -163,15 +163,6 @@ export default class Component extends Element {
             addons: [],
         }, ...sources);
     }
-    /**
-     * Return the validator as part of the component.
-     *
-     * @return {ValidationChecker}
-     * @constructor
-     */
-    static get Validator() {
-        return Validator;
-    }
     /**
      * Return the simple condition settings as part of the component.
      *
@@ -241,16 +232,21 @@ export default class Component extends Element {
             this.options.components[component.type]) {
             _.merge(component, this.options.components[component.type]);
         }
-        /**
-         * Set the validator instance.
-         */
-        this.validator = Validator;
         /**
          * The data path to this specific component instance.
          *
          * @type {string}
          */
-        this.path = '';
+        this.path = component?.key || '';
+        /**
+         * An array of all the children components errors.
+         */
+        this.childErrors = [];
+        /**
+         * Last validation errors that have occured.
+         */
+        this._errors = [];
+        this._visibleErrors = [];
         /**
          * The Form.io component JSON schema.
          * @type {*}
@@ -274,11 +270,6 @@ export default class Component extends Element {
          * @type {*}
          */
         this._data = data || {};
-        /**
-         * The existing error that this component has.
-         * @type {string}
-         */
-        this.error = '';
         /**
          * Tool tip text after processing
          * @type {string}
@@ -289,6 +280,12 @@ export default class Component extends Element {
          * @type {number}
          */
         this.row = this.options.row;
+        /**
+         * Points to a flat map of child components (if applicable).
+         *
+         * @type {Object}
+         */
+        this.childComponentsMap = {};
         /**
          * Determines if this component is disabled, or not.
          *
@@ -300,8 +297,8 @@ export default class Component extends Element {
          *
          * @type {Component}
          */
-        this.root = this.options.root;
-        this.localRoot = this.options.localRoot;
+        this.root = this.options.root || this;
+        this.localRoot = this.options.localRoot || this;
         /**
          * If this input has been input and provided value.
          *
@@ -315,14 +312,7 @@ export default class Component extends Element {
          */
         this.parent = this.options.parent;
         this.options.name = this.options.name || 'data';
-        /**
-         * The validators that are assigned to this component.
-         * @type {[string]}
-         */
-        this.validators = ['required', 'minLength', 'maxLength', 'minWords', 'maxWords', 'custom', 'pattern', 'json', 'mask'];
         this._path = '';
-        // Nested forms don't have parents so we need to pass their path in.
-        this._parentPath = this.options.parentPath || '';
         // Needs for Nextgen Rules Engine
         this.resetCaches();
         /**
@@ -422,6 +412,14 @@ 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;
+    }
     get data() {
         return this._data;
     }
@@ -653,7 +651,7 @@ export default class Component extends Element {
         const isRightAlign = this.rightDirection(this.labelPositions[1]);
         let contentMargin = '';
         if (this.component.hideLabel) {
-            const margin = this.labelWidth + this.labelMargin;
+            const margin = isCondensed ? 0 : this.labelWidth + this.labelMargin;
             contentMargin = isRightPosition ? `margin-right: ${margin}%` : '';
             contentMargin = isLeftPosition ? `margin-left: ${margin}%` : '';
         }
@@ -735,9 +733,9 @@ export default class Component extends Element {
         if (text in enTranslation && params._userInput) {
             return text;
         }
-        params.data = this.rootValue;
-        params.row = this.data;
-        params.component = this.component;
+        params.data = params.data || this.rootValue;
+        params.row = params.row || this.data;
+        params.component = params.component || this.component;
         return super.t(text, params, ...args);
     }
     labelIsHidden() {
@@ -854,8 +852,7 @@ export default class Component extends Element {
      * @returns {*}
      */
     sanitize(dirty, forceSanitize, options) {
-        // No need to sanitize when generating PDF'S since no users interact with the form.
-        if ((!this.shouldSanitizeValue && !forceSanitize) || ((this.options.pdf) && !forceSanitize)) {
+        if (!this.shouldSanitizeValue && !forceSanitize) {
             return dirty;
         }
         return FormioUtils.sanitize(dirty, {
@@ -978,17 +975,13 @@ export default class Component extends Element {
     }
     getModalPreviewTemplate() {
         const dataValue = this.component.type === 'password' ? this.dataValue.replace(/./g, '•') : this.dataValue;
-        const message = this.error ? {
-            level: 'error',
-            message: this.error.message,
-        } : '';
         let modalLabel;
         if (this.hasInput && this.component.validate?.required && !this.isPDFReadOnlyMode) {
             modalLabel = { className: 'field-required' };
         }
         return this.renderTemplate('modalPreview', {
             previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
-            messages: message && this.renderTemplate('message', message),
+            messages: '',
             labelInfo: modalLabel,
         });
     }
@@ -1476,6 +1469,12 @@ export default class Component extends Element {
     get name() {
         return this.t(this.component.label || this.component.placeholder || this.key, { _userInput: true });
     }
+    get visibleErrors() {
+        return this._visibleErrors;
+    }
+    get errors() {
+        return this._errors;
+    }
     /**
      * Returns the error label for this component.
      * @return {*}
@@ -1796,7 +1795,7 @@ export default class Component extends Element {
                 if (message.message && typeof message.message === 'string') {
                     message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
                 }
-                return this.renderTemplate('message', message);
+                return this.renderTemplate('message', { ...message });
             }).join(''));
         }
     }
@@ -1869,7 +1868,7 @@ export default class Component extends Element {
             this.addClass(this.getElement(), 'formio-modified');
         }
         // If we are supposed to validate on blur, then don't trigger validation yet.
-        if (this.component.validateOn === 'blur' && !this.errors.length) {
+        if (this.component.validateOn === 'blur') {
             flags.noValidate = true;
         }
         if (this.component.onChange) {
@@ -2391,6 +2390,10 @@ export default class Component extends Element {
      */
     updateOnChange(flags = {}, changed = false) {
         if (!flags.noUpdateEvent && changed) {
+            if (flags.fromSubmission) {
+                // Reset the errors when a submission has been made and allow it to revalidate.
+                this._errors = [];
+            }
             this.triggerChange(flags);
             return true;
         }
@@ -2557,7 +2560,21 @@ export default class Component extends Element {
         if (!this.hasInput || (!dirty && this.pristine)) {
             return '';
         }
-        return _.map(Validator.checkComponent(this, data), 'message').join('\n\n');
+        const validationScope = { errors: [] };
+        processOneSync({
+            component: this.component,
+            data,
+            row,
+            path: this.path || this.component.key,
+            scope: validationScope,
+            instance: this,
+            processors: [
+                validateProcessSync
+            ]
+        });
+        const errors = validationScope.errors;
+        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
+        return _.map(interpolatedErrors, 'message').join('\n\n');
     }
     /**
      * Returns if the component is valid or not.
@@ -2569,15 +2586,82 @@ export default class Component extends Element {
     isValid(data, dirty) {
         return !this.invalidMessage(data, dirty);
     }
-    setComponentValidity(messages, dirty, silentCheck) {
-        const hasErrors = !!messages.filter(message => message.level === 'error' && !message.fromServer).length;
-        if (messages.length && (!silentCheck || this.error) && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {
-            this.setCustomValidity(messages, dirty);
+    setComponentValidity(errors, dirty, silentCheck) {
+        if (silentCheck) {
+            return [];
+        }
+        const messages = errors.filter(message => !message.fromServer);
+        if (errors.length && !!messages.length && (!this.isEmpty(this.defaultValue) || dirty || !this.pristine)) {
+            return this.setCustomValidity(messages, dirty);
+        }
+        else {
+            return this.setCustomValidity('');
+        }
+    }
+    /**
+     * Interpolate errors from the validation methods.
+     * @param {*} errors
+     * @returns
+     */
+    interpolateErrors(errors) {
+        const interpolatedErrors = FormioUtils.interpolateErrors(this.component, errors, this.t.bind(this));
+        return this.serverErrors?.length ? [...interpolatedErrors, ...this.serverErrors] : interpolatedErrors;
+    }
+    /**
+     * Show component validation errors.
+     * @param {*} errors - An array of errors that have occured.
+     * @param {*} data - The root submission data.
+     * @param {*} row - The contextual row data.
+     * @param {*} flags - The flags to perform validation.
+     * @returns
+     */
+    showValidationErrors(errors, data, row, flags) {
+        if (flags.silentCheck) {
+            return [];
+        }
+        if (this.options.alwaysDirty) {
+            flags.dirty = true;
+        }
+        if (flags.fromSubmission && this.hasValue(data)) {
+            flags.dirty = true;
+        }
+        this.setDirty(flags.dirty);
+        return this.setComponentValidity(errors, flags.dirty, flags.silentCheck, flags.fromSubmission);
+    }
+    /**
+     * Perform a component validation.
+     * @param {*} data - The root data you wish to use for this component.
+     * @param {*} row - The contextual row data you wish to use for this component.
+     * @param {*} flags - The flags to control the behavior of the validation.
+     * @returns
+     */
+    validateComponent(data, row, flags = {}) {
+        data = data || this.rootValue;
+        row = row || this.data;
+        const { async = false } = flags;
+        if (this.shouldSkipValidation(data, row, flags)) {
+            return async ? Promise.resolve([]) : [];
         }
-        else if (!silentCheck) {
-            this.setCustomValidity('');
+        const processContext = {
+            component: this.component,
+            data,
+            row,
+            path: this.path || this.component.key,
+            instance: this,
+            scope: { errors: [] },
+            processors: [
+                async ? validateProcess : validateProcessSync
+            ]
+        };
+        if (async) {
+            return processOne(processContext).then(() => {
+                this._errors = this.interpolateErrors(processContext.scope.errors);
+                return this._errors;
+            });
         }
-        return !hasErrors;
+        processOneSync(processContext);
+        this._errors = this.interpolateErrors(processContext.scope.errors);
+        return this._errors;
     }
     /**
      * Checks the validity of this component and sets the error message if it is invalid.
@@ -2587,32 +2671,47 @@ export default class Component extends Element {
      * @param row
      * @return {boolean}
      */
-    checkComponentValidity(data, dirty, row, options = {}) {
+    checkComponentValidity(data, dirty, row, flags = {}, allErrors = []) {
         data = data || this.rootValue;
         row = row || this.data;
-        const { async = false, silentCheck = false } = options;
-        if (this.shouldSkipValidation(data, dirty, row)) {
-            this.setCustomValidity('');
-            return async ? Promise.resolve(true) : true;
+        flags.dirty = dirty || false;
+        if (flags.async) {
+            return this.validateComponent(data, row, flags).then((errors) => {
+                allErrors.push(...errors);
+                if (this.parent && this.parent.childErrors) {
+                    this.parent.childErrors.push(...errors);
+                }
+                this.showValidationErrors(errors, data, row, flags);
+                return errors.length === 0;
+            });
         }
-        const check = Validator.checkComponent(this, data, row, true, async);
-        let validations = check;
-        if (this.serverErrors?.length) {
-            validations = check.concat(this.serverErrors);
+        else {
+            const errors = this.validateComponent(data, row, flags);
+            this.showValidationErrors(errors, data, row, flags);
+            allErrors.push(...errors);
+            if (this.parent && this.parent.childErrors) {
+                this.parent.childErrors.push(...errors);
+            }
+            return errors.length === 0;
         }
-        return async ?
-            validations.then((messages) => this.setComponentValidity(messages, dirty, silentCheck)) :
-            this.setComponentValidity(validations, dirty, silentCheck);
     }
-    checkValidity(data, dirty, row, silentCheck) {
+    /**
+     * Checks the validity of the component.
+     * @param {*} data
+     * @param {*} dirty
+     * @param {*} row
+     * @param {*} silentCheck
+     * @returns
+     */
+    checkValidity(data, dirty, row, silentCheck, errors = []) {
         data = data || this.rootValue;
         row = row || this.data;
-        const isValid = this.checkComponentValidity(data, dirty, row, { silentCheck });
-        this.checkModal();
-        return isValid;
+        console.log('Deprecation warning:  Component.checkValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
+        return this.checkComponentValidity(data, dirty, row, { silentCheck }, errors);
     }
-    checkAsyncValidity(data, dirty, row, silentCheck) {
-        return Promise.resolve(this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }));
+    checkAsyncValidity(data, dirty, row, silentCheck, errors = []) {
+        console.log('Deprecation warning:  Component.checkAsyncValidity() will be deprecated in 6.x version of renderer. Use Component.validateComponent instead.');
+        return this.checkComponentValidity(data, dirty, row, { async: true, silentCheck }, errors);
     }
     /**
      * Check the conditions, calculations, and validity of a single component and triggers an update if
@@ -2640,35 +2739,15 @@ export default class Component extends Element {
         if (this.id !== flags.triggeredComponentId) {
             this.calculateComponentValue(data, flags, row);
         }
-        if (flags.noValidate && !flags.validateOnInit && !flags.fromIframe) {
-            if (flags.fromSubmission && this.rootPristine && this.pristine && this.error && flags.changed) {
-                this.checkComponentValidity(data, !!this.options.alwaysDirty, row, true);
-            }
-            return true;
-        }
-        let isDirty = false;
-        // We need to set dirty if they explicitly set noValidate to false.
-        if (this.options.alwaysDirty || flags.dirty) {
-            isDirty = true;
-        }
-        // See if they explicitely set the values with setSubmission.
-        if (flags.fromSubmission && this.hasValue(data)) {
-            isDirty = true;
-        }
-        this.setDirty(isDirty);
-        if (this.component.validateOn === 'blur' && flags.fromSubmission) {
-            return true;
-        }
-        const isValid = this.checkComponentValidity(data, isDirty, row, flags);
-        this.checkModal();
-        return isValid;
     }
-    checkModal(isValid = true, dirty = false) {
+    checkModal(errors = [], dirty = false) {
+        const messages = errors.filter(error => !error.fromServer);
+        const isValid = errors.length === 0;
         if (!this.component.modalEdit || !this.componentModal) {
             return;
         }
         if (dirty && !isValid) {
-            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!this.errors.length, this.refs.openModalWrapper);
+            this.setErrorClasses([this.refs.openModal], dirty, !isValid, !!messages.length, this.refs.openModalWrapper);
         }
         else {
             this.clearErrorClasses(this.refs.openModalWrapper);
@@ -2692,9 +2771,6 @@ export default class Component extends Element {
     validateMultiple() {
         return true;
     }
-    get errors() {
-        return this.error ? [this.error] : [];
-    }
     clearErrorClasses(element = this.element) {
         this.removeClass(element, this.options.componentErrorClass);
         this.removeClass(element, 'alert alert-danger');
@@ -2741,12 +2817,14 @@ export default class Component extends Element {
             });
         });
     }
+    // eslint-disable-next-line max-statements
     setCustomValidity(messages, dirty, external) {
         const inputRefs = this.isInputComponent ? this.refs.input || [] : null;
         if (typeof messages === 'string' && messages) {
             messages = {
                 level: 'error',
                 message: messages,
+                component: this.component,
             };
         }
         if (!Array.isArray(messages)) {
@@ -2757,17 +2835,18 @@ export default class Component extends Element {
                 messages = [];
             }
         }
-        const hasErrors = !!messages.filter(message => message.level === 'error').length;
+        const errors = messages.filter(message => message.level === 'error');
         let invalidInputRefs = inputRefs;
+        // Filter the invalid input refs in multiple components
         if (this.component.multiple) {
-            const inputRefsArray = Array.from(inputRefs);
-            inputRefsArray.forEach((input) => {
+            const refsArray = Array.from(inputRefs);
+            refsArray.forEach((input) => {
                 this.setElementInvalid(this.performInputMapping(input), false);
             });
-            this.setInputWidgetErrorClasses(inputRefsArray, false);
-            invalidInputRefs = inputRefsArray.filter((ref) => {
+            this.setInputWidgetErrorClasses(refsArray, false);
+            invalidInputRefs = refsArray.filter((ref, index) => {
                 return messages.some?.((msg) => {
-                    return msg?.context?.input === ref;
+                    return msg?.context?.index === index;
                 });
             });
         }
@@ -2775,40 +2854,32 @@ export default class Component extends Element {
             if (this.refs.messageContainer) {
                 this.empty(this.refs.messageContainer);
             }
-            this.error = {
+            this.emit('componentError', {
+                instance: this,
                 component: this.component,
                 message: messages[0].message,
                 messages,
                 external: !!external,
-            };
-            this.emit('componentError', this.error);
+            });
             this.addMessages(messages, dirty, invalidInputRefs);
             if (invalidInputRefs) {
-                this.setErrorClasses(invalidInputRefs, dirty, hasErrors, !!messages.length);
+                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);
             }
         }
-        else if (!this.error || (this.error && this.error.external === !!external)) {
+        else if (!errors.length || (errors[0].external === !!external)) {
             if (this.refs.messageContainer) {
                 this.empty(this.refs.messageContainer);
             }
             if (this.refs.modalMessageContainer) {
                 this.empty(this.refs.modalMessageContainer);
             }
-            this.error = null;
             if (invalidInputRefs) {
-                this.setErrorClasses(invalidInputRefs, dirty, hasErrors, !!messages.length);
+                this.setErrorClasses(invalidInputRefs, dirty, !!errors.length, !!messages.length);
             }
             this.clearErrorClasses();
         }
-        // if (!this.refs.input) {
-        //   return;
-        // }
-        // this.refs.input.forEach(input => {
-        //   input = this.performInputMapping(input);
-        //   if (typeof input.setCustomValidity === 'function') {
-        //     input.setCustomValidity(message, dirty);
-        //   }
-        // });
+        this._visibleErrors = messages;
+        return messages;
     }
     /**
      * Determines if the value of this component is hidden from the user as if it is coming from the server, but is
@@ -2828,8 +2899,10 @@ export default class Component extends Element {
         }
         return (this.component.protected || !this.component.persistent || (this.component.persistent === 'client-only'));
     }
-    shouldSkipValidation(data, dirty, row) {
+    shouldSkipValidation(data, row, flags = {}) {
         const rules = [
+            // Do not validate if the flags say not too.
+            () => flags.noValidate,
             // Do not check custom validation for empty data if it is not required
             () => this.component.validate.custom && !this.dataValue && !this.component.validate.required,
             // Force valid if component is read-only

package/lib/mjs/components/_classes/component/editForm/Component.edit.addons.d.ts

@@ -6,6 +6,10 @@ declare const _default: {
     input: boolean;
     key: string;
     label: string;
+    templates: {
+        header: string;
+        row: string;
+    };
     components: ({
         type: string;
         key: string;
@@ -600,6 +604,7 @@ declare const _default: {
             multiple?: undefined;
             hideLabel?: undefined;
         })[];
+        tableView: boolean;
         defaultValue: {
             data: {
                 rulesSettings: {
@@ -640,6 +645,9 @@ declare const _default: {
             }[];
         };
         input: boolean;
+        validate: {
+            required: boolean;
+        };
     })[];
 }[];
 export default _default;

package/lib/mjs/components/_classes/component/editForm/Component.edit.addons.js

@@ -9,6 +9,33 @@ export default [
         input: true,
         key: 'addons',
         label: 'Addons',
+        templates: {
+            // eslint-disable-next-line quotes
+            header: `<div class="row">
+                <div class="col-6">{{ t(components[0].label) }}</div>
+                <div class="col-4">Settings</div>
+              </div>`,
+            // eslint-disable-next-line quotes
+            row: `<div class="row">
+              <div class="col-6">
+                {{ row.name.label }}
+              </div>
+              <div class="col-4 text-muted">
+                Click Edit to see addon's settings
+              </div>
+
+              {% if (!instance.options.readOnly && !instance.disabled) { %}
+                <div class="col-2">
+                  <div class="btn-group pull-right">
+                    <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
+                    {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
+                      <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
+                    {% } %}
+                  </div>
+                </div>
+              {% } %}
+            </div>`,
+        },
         components: [
             {
                 label: 'Name',
@@ -31,7 +58,10 @@ export default [
                         }));
                     },
                 },
-                input: true
+                input: true,
+                validate: {
+                    required: true,
+                },
             },
             ...editForms,
         ]

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

@@ -43,13 +43,6 @@ export default class NestedComponent extends Field {
      * @return {Object} - The component retrieved.
      */
     getComponentById(id: string, fn: Function): Object;
-    /**
-     * Return a path of component's value.
-     *
-     * @param {Object} component - The component instance.
-     * @return {string} - The component's value path.
-     */
-    calculateComponentPath(component: Object): string;
     /**
      * Create a new component and add it to the components array.
      *
@@ -83,7 +76,7 @@ export default class NestedComponent extends Field {
     attachComponentsLogic(components: any): void;
     attachComponents(element: any, components: any, container: any): Promise<any>;
     /**
-     * Remove a component from the components array.
+     * Remove a component from the components array and from the children object
      *
      * @param {Component} component - The component to remove from the components.
      * @param {Array<Component>} components - An array of components to remove this component from.
@@ -106,7 +99,8 @@ export default class NestedComponent extends Field {
      */
     removeComponentById(id: string, fn: Function): null;
     updateValue(value: any, flags?: {}): any;
-    checkData(data: any, flags: any, row: any, components: any): any;
+    shouldSkipValidation(data: any, row: any, flags: any): boolean;
+    checkData(data: any, flags: any, row: any, components: any): true | undefined;
     checkConditions(data: any, flags: any, row: any): boolean;
     clearOnHide(show: any): void;
     restoreComponentsContext(): void;
@@ -119,11 +113,34 @@ export default class NestedComponent extends Field {
     calculateValue(data: any, flags: any, row: any): any;
     isLastPage(): boolean;
     isValid(data: any, dirty: any): any;
-    checkChildComponentsValidity(data: any, dirty: any, row: any, silentCheck: any, isParentValid: any): any;
-    checkValidity(data: any, dirty: any, row: any, silentCheck: any): any;
+    validationProcessor({ scope, data, row, instance }: {
+        scope: any;
+        data: any;
+        row: any;
+        instance: any;
+    }, flags: any): void;
+    /**
+     * Perform a validation on all child components of this nested component.
+     * @param {*} components
+     * @param {*} data
+     * @param {*} flags
+     * @returns
+     */
+    validateComponents(components: any, data: any, flags?: any): any;
+    /**
+     * Validate a nested component with data, or its own internal data.
+     * @param {*} data
+     * @param {*} flags
+     * @returns
+     */
+    validate(data: any, flags?: any): any;
+    checkComponentValidity(data: any, dirty: any, row: any, flags?: {}, allErrors?: any[]): boolean;
+    checkValidity(data: any, dirty: any, row: any, silentCheck: any, childErrors?: any[]): boolean;
+    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<any>;
     setPristine(pristine: any): void;
     get isPristine(): any;
     destroyComponents(all?: boolean): void;
+    get visibleErrors(): any;
     get errors(): any;
     get dataReady(): Promise<any[]>;
     setNestedValue(component: any, value: any, flags?: {}): any;