@bpmn-io/form-js-viewer 1.8.4 → 1.8.6

package/dist/index.cjs

@@ -741,6 +741,20 @@ function generateIdForType(type) {
 function clone(data, replacer) {
   return JSON.parse(JSON.stringify(data, replacer));
 }
+function runRecursively(formField, fn) {
+  const components = formField.components || [];
+  components.forEach((component, _) => {
+    runRecursively(component, fn);
+  });
+  fn(formField);
+}
+function wrapObjectKeysWithUnderscores(obj) {
+  const newObj = {};
+  for (const [key, value] of Object.entries(obj)) {
+    newObj[`_${key}_`] = value;
+  }
+  return newObj;
+}
 
 /**
  * Transform a LocalExpressionContext object into a usable FEEL context.
@@ -757,25 +771,24 @@ function buildExpressionContext(context) {
   return {
     ...specialContextKeys,
     ...data,
-    ..._wrapObjectKeysWithUnderscores(specialContextKeys)
+    ...wrapObjectKeysWithUnderscores(specialContextKeys)
   };
 }
-function runRecursively(formField, fn) {
-  const components = formField.components || [];
-  components.forEach((component, index) => {
-    runRecursively(component, fn);
-  });
-  fn(formField);
-}
-
-// helpers //////////////////////
 
-function _wrapObjectKeysWithUnderscores(obj) {
-  const newObj = {};
-  for (const [key, value] of Object.entries(obj)) {
-    newObj[`_${key}_`] = value;
+/**
+ * Evaluate a string based on the expressionLanguage and context information.
+ * If the string is not an expression, it is returned as is.
+ *
+ * @param {any} expressionLanguage - The expression language to use.
+ * @param {string} value - The string to evaluate.
+ * @param {Object} expressionContextInfo - The context information to use.
+ * @returns {any} - Evaluated value or the original value if not an expression.
+ */
+function runExpressionEvaluation(expressionLanguage, value, expressionContextInfo) {
+  if (expressionLanguage && expressionLanguage.isExpression(value)) {
+    return expressionLanguage.evaluate(value, buildExpressionContext(expressionContextInfo));
   }
-  return newObj;
+  return value;
 }
 
 /**
@@ -908,12 +921,7 @@ function _isAllowedValue(value) {
 function useExpressionEvaluation(value) {
   const expressionLanguage = useService('expressionLanguage');
   const expressionContextInfo = hooks.useContext(LocalExpressionContext);
-  return hooks.useMemo(() => {
-    if (expressionLanguage && expressionLanguage.isExpression(value)) {
-      return expressionLanguage.evaluate(value, buildExpressionContext(expressionContextInfo));
-    }
-    return value;
-  }, [expressionLanguage, expressionContextInfo, value]);
+  return hooks.useMemo(() => runExpressionEvaluation(expressionLanguage, value, expressionContextInfo), [expressionLanguage, expressionContextInfo, value]);
 }
 
 /**
@@ -1790,7 +1798,6 @@ function Checkbox(props) {
     target
   }) => {
     props.onChange({
-      field,
       value: target.checked
     });
   };
@@ -1869,7 +1876,6 @@ function Checklist(props) {
   const toggleCheckbox = toggledValue => {
     const newValues = hasEqualValue(toggledValue, values) ? values.filter(value => !isEqual(value, toggledValue)) : [...values, toggledValue];
     props.onChange({
-      field,
       value: newValues
     });
   };
@@ -1957,7 +1963,7 @@ function FormField(props) {
   const {
     field,
     indexes,
-    onChange
+    onChange: _onChange
   } = props;
   const formFields = useService('formFields'),
     viewerCommands = useService('viewerCommands', false),
@@ -1999,21 +2005,22 @@ function FormField(props) {
   // add precedence: global readonly > form field disabled
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
+  const fieldInstance = hooks.useMemo(() => ({
+    id: field.id,
+    expressionContextInfo: localExpressionContext,
+    valuePath,
+    indexes
+  }), [field.id, valuePath, localExpressionContext, indexes]);
 
   // register form field instance
   hooks.useEffect(() => {
     if (formFieldInstanceRegistry && !hidden) {
-      const instanceId = formFieldInstanceRegistry.add({
-        id: field.id,
-        expressionContextInfo: localExpressionContext,
-        valuePath,
-        indexes
-      });
+      const instanceId = formFieldInstanceRegistry.add(fieldInstance);
       return () => {
         formFieldInstanceRegistry.remove(instanceId);
       };
     }
-  }, [formFieldInstanceRegistry, field.id, localExpressionContext, valuePath, indexes, hidden]);
+  }, [fieldInstance, formFieldInstanceRegistry, hidden]);
 
   // ensures the initial validation behavior can be re-triggered upon form reset
   hooks.useEffect(() => {
@@ -2034,34 +2041,33 @@ function FormField(props) {
     const hasInitialValue = initialValue && !isEqual(initialValue, []);
     if (initialValidationTrigger && hasInitialValue) {
       setInitialValidationTrigger(false);
-      viewerCommands.updateFieldValidation(field, initialValue, indexes);
+      viewerCommands.updateFieldInstanceValidation(fieldInstance, initialValue);
     }
-  }, [viewerCommands, field, initialValue, initialValidationTrigger, indexes]);
+  }, [fieldInstance, initialValidationTrigger, initialValue, viewerCommands]);
   const onBlur = hooks.useCallback(() => {
     const value = minDash.get(data, valuePath);
     if (initialValidationTrigger) {
       setInitialValidationTrigger(false);
-      viewerCommands.updateFieldValidation(field, value, indexes);
+      viewerCommands.updateFieldInstanceValidation(fieldInstance, value);
     }
     eventBus.fire('formField.blur', {
       formField: field
     });
-  }, [eventBus, field, indexes, viewerCommands, initialValidationTrigger, data, valuePath]);
+  }, [data, eventBus, field, fieldInstance, initialValidationTrigger, valuePath, viewerCommands]);
   const onFocus = hooks.useCallback(() => {
     eventBus.fire('formField.focus', {
       formField: field
     });
   }, [eventBus, field]);
-  const onChangeIndexed = hooks.useCallback(update => {
-    // any data change will trigger validation
+  const onChange = hooks.useCallback(update => {
     setInitialValidationTrigger(false);
-
-    // add indexes of the keyed field to the update, if any
-    onChange(fieldConfig.keyed ? {
-      ...update,
-      indexes
-    } : update);
-  }, [onChange, fieldConfig.keyed, indexes]);
+    _onChange({
+      field,
+      indexes,
+      fieldInstance,
+      ...update
+    });
+  }, [_onChange, field, fieldInstance, indexes]);
   if (hidden) {
     return jsxRuntime.jsx(Hidden, {
       field: field
@@ -2074,11 +2080,12 @@ function FormField(props) {
     disabled: disabled,
     errors: fieldErrors,
     domId: domId,
-    onChange: disabled || readonly ? noop$1 : onChangeIndexed,
+    onChange: disabled || readonly ? noop$1 : onChange,
     onBlur: disabled || readonly ? noop$1 : onBlur,
     onFocus: disabled || readonly ? noop$1 : onFocus,
     readonly: readonly,
-    value: value
+    value: value,
+    fieldInstance: fieldInstance
   });
   if (fieldConfig.escapeGridRender) {
     return formFieldElement;
@@ -3914,7 +3921,6 @@ function Radio(props) {
   } = validate;
   const onChange = v => {
     props.onChange({
-      field,
       value: v
     });
   };
@@ -4062,10 +4068,9 @@ function SearchableSelect(props) {
   const setValue = hooks.useCallback(option => {
     setFilter(option && option.label || '');
     props.onChange({
-      value: option && option.value || null,
-      field
+      value: option && option.value || null
     });
-  }, [field, props]);
+  }, [props]);
   const displayState = hooks.useMemo(() => {
     const ds = {};
     ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
@@ -4211,10 +4216,9 @@ function SimpleSelect(props) {
   const valueLabel = hooks.useMemo(() => value && getLabelCorrelation(value), [value, getLabelCorrelation]);
   const setValue = hooks.useCallback(option => {
     props.onChange({
-      value: option && option.value || null,
-      field
+      value: option && option.value || null
     });
-  }, [field, props]);
+  }, [props]);
   const displayState = hooks.useMemo(() => {
     const ds = {};
     ds.componentReady = !disabled && !readonly && loadState === LOAD_STATES.LOADED;
@@ -4552,15 +4556,13 @@ function Taglist(props) {
       return;
     }
     props.onChange({
-      value: [...values, value],
-      field
+      value: [...values, value]
     });
   };
   const deselectValue = value => {
     const newValues = values.filter(v => !isEqual(v, value));
     props.onChange({
-      value: newValues,
-      field
+      value: newValues
     });
   };
   const onInputChange = ({
@@ -5049,7 +5051,6 @@ function Textfield(props) {
     target
   }) => {
     props.onChange({
-      field,
       value: target.value
     });
   });
@@ -5149,7 +5150,6 @@ function Textarea(props) {
     target
   }) => {
     props.onChange({
-      field,
       value: target.value
     });
   });
@@ -6618,6 +6618,9 @@ var commandModule = {
   commandStack: ['type', CommandStack]
 };
 
+/**
+ * @deprecated
+ */
 class UpdateFieldValidationHandler {
   constructor(form, validator) {
     this._form = form;
@@ -6647,6 +6650,38 @@ class UpdateFieldValidationHandler {
 }
 UpdateFieldValidationHandler.$inject = ['form', 'validator'];
 
+class UpdateFieldInstanceValidationHandler {
+  constructor(form, validator) {
+    this._form = form;
+    this._validator = validator;
+  }
+  execute(context) {
+    const {
+      fieldInstance,
+      value
+    } = context;
+    const {
+      id,
+      indexes
+    } = fieldInstance;
+    const {
+      errors
+    } = this._form._getState();
+    context.oldErrors = clone(errors);
+    const fieldErrors = this._validator.validateFieldInstance(fieldInstance, value);
+    const updatedErrors = minDash.set(errors, [id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
+    this._form._setState({
+      errors: updatedErrors
+    });
+  }
+  revert(context) {
+    this._form._setState({
+      errors: context.oldErrors
+    });
+  }
+}
+UpdateFieldInstanceValidationHandler.$inject = ['form', 'validator'];
+
 class ViewerCommands {
   constructor(commandStack, eventBus) {
     this._commandStack = commandStack;
@@ -6661,9 +6696,14 @@ class ViewerCommands {
   }
   getHandlers() {
     return {
-      'formField.validation.update': UpdateFieldValidationHandler
+      'formField.validation.update': UpdateFieldValidationHandler,
+      'formFieldInstance.validation.update': UpdateFieldInstanceValidationHandler
     };
   }
+
+  /**
+   * @deprecated
+   */
   updateFieldValidation(field, value, indexes) {
     const context = {
       field,
@@ -6672,6 +6712,13 @@ class ViewerCommands {
     };
     this._commandStack.execute('formField.validation.update', context);
   }
+  updateFieldInstanceValidation(fieldInstance, value) {
+    const context = {
+      fieldInstance,
+      value
+    };
+    this._commandStack.execute('formFieldInstance.validation.update', context);
+  }
 }
 ViewerCommands.$inject = ['commandStack', 'eventBus'];
 
@@ -6856,9 +6903,7 @@ class RepeatRenderManager {
       updatedValues.push(newItem);
       shouldScroll.current = true;
       props.onChange({
-        field: repeaterField,
-        value: updatedValues,
-        indexes
+        value: updatedValues
       });
       setSharedRepeatState(state => ({
         ...state,
@@ -7517,11 +7562,18 @@ const EMAIL_PATTERN = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-
 const PHONE_PATTERN = /(\+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{4,20}$/;
 const VALIDATE_FEEL_PROPERTIES = ['min', 'max', 'minLength', 'maxLength'];
 class Validator {
-  constructor(expressionLanguage, conditionChecker, form) {
+  constructor(expressionLanguage, conditionChecker, form, formFieldRegistry) {
     this._expressionLanguage = expressionLanguage;
     this._conditionChecker = conditionChecker;
     this._form = form;
+    this._formFieldRegistry = formFieldRegistry;
   }
+
+  /**
+   * Validate against a field definition, does not support proper expression evaluation.
+   *
+   * @deprecated use validateFieldInstance instead
+   */
   validateField(field, value) {
     const {
       type,
@@ -7529,72 +7581,124 @@ class Validator {
     } = field;
     let errors = [];
     if (type === 'number') {
-      const {
-        decimalDigits,
-        increment
-      } = field;
-      if (value === 'NaN') {
-        errors = [...errors, 'Value is not a number.'];
-      } else if (value) {
-        if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
-          errors = [...errors, 'Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.'];
-        }
-        if (increment) {
-          const bigValue = Big(value);
-          const bigIncrement = Big(increment);
-          const offset = bigValue.mod(bigIncrement);
-          if (offset.cmp(0) !== 0) {
-            const previousValue = bigValue.minus(offset);
-            const nextValue = previousValue.plus(bigIncrement);
-            errors = [...errors, `Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`];
-          }
-        }
-      }
+      errors = [...errors, ...runNumberValidation(field, value)];
     }
     if (!validate) {
       return errors;
     }
-    const evaluatedValidation = evaluateFEELValues(validate, this._expressionLanguage, this._conditionChecker, this._form);
-    if (evaluatedValidation.pattern && value && !new RegExp(evaluatedValidation.pattern).test(value)) {
-      errors = [...errors, `Field must match pattern ${evaluatedValidation.pattern}.`];
-    }
-    if (evaluatedValidation.required) {
-      const isUncheckedCheckbox = type === 'checkbox' && value === false;
-      const isUnsetValue = minDash.isNil(value) || value === '';
-      const isEmptyMultiselect = Array.isArray(value) && value.length === 0;
-      if (isUncheckedCheckbox || isUnsetValue || isEmptyMultiselect) {
-        errors = [...errors, 'Field is required.'];
-      }
-    }
-    if ('min' in evaluatedValidation && (value || value === 0) && value < evaluatedValidation.min) {
-      errors = [...errors, `Field must have minimum value of ${evaluatedValidation.min}.`];
-    }
-    if ('max' in evaluatedValidation && (value || value === 0) && value > evaluatedValidation.max) {
-      errors = [...errors, `Field must have maximum value of ${evaluatedValidation.max}.`];
-    }
-    if ('minLength' in evaluatedValidation && value && value.trim().length < evaluatedValidation.minLength) {
-      errors = [...errors, `Field must have minimum length of ${evaluatedValidation.minLength}.`];
-    }
-    if ('maxLength' in evaluatedValidation && value && value.trim().length > evaluatedValidation.maxLength) {
-      errors = [...errors, `Field must have maximum length of ${evaluatedValidation.maxLength}.`];
+    const evaluatedValidation = oldEvaluateFEELValues(validate, this._expressionLanguage, this._conditionChecker, this._form);
+    errors = [...errors, ...runPresetValidation(field, evaluatedValidation, value)];
+    return errors;
+  }
+
+  /**
+   * Validate a field instance.
+   *
+   * @param {Object} fieldInstance
+   * @param {string} value
+   *
+   * @returns {Array<string>}
+   */
+  validateFieldInstance(fieldInstance, value) {
+    const {
+      id,
+      expressionContextInfo
+    } = fieldInstance;
+    const field = this._formFieldRegistry.get(id);
+    if (!field) {
+      return [];
     }
-    if ('validationType' in evaluatedValidation && value && evaluatedValidation.validationType === 'phone' && !PHONE_PATTERN.test(value)) {
-      errors = [...errors, 'Field must be a valid  international phone number. (e.g. +4930664040900)'];
+    const {
+      type,
+      validate
+    } = field;
+    let errors = [];
+    if (type === 'number') {
+      errors = [...errors, ...runNumberValidation(field, value)];
     }
-    if ('validationType' in evaluatedValidation && value && evaluatedValidation.validationType === 'email' && !EMAIL_PATTERN.test(value)) {
-      errors = [...errors, 'Field must be a valid email.'];
+    if (!validate) {
+      return errors;
     }
+    const evaluatedValidation = evaluateFEELValues(validate, this._expressionLanguage, expressionContextInfo);
+    errors = [...errors, ...runPresetValidation(field, evaluatedValidation, value)];
     return errors;
   }
 }
-Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form'];
+Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form', 'formFieldRegistry'];
 
 // helpers //////////
 
-/**
- * Helper function to evaluate optional FEEL validation values.
- */
-function evaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
+function runNumberValidation(field, value) {
+  const {
+    decimalDigits,
+    increment
+  } = field;
+  const errors = [];
+  if (value === 'NaN') {
+    errors.push('Value is not a number.');
+  } else if (value) {
+    if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
+      errors.push('Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.');
+    }
+    if (increment) {
+      const bigValue = Big(value);
+      const bigIncrement = Big(increment);
+      const offset = bigValue.mod(bigIncrement);
+      if (offset.cmp(0) !== 0) {
+        const previousValue = bigValue.minus(offset);
+        const nextValue = previousValue.plus(bigIncrement);
+        errors.push(`Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`);
+      }
+    }
+  }
+  return errors;
+}
+function runPresetValidation(field, validation, value) {
+  const errors = [];
+  if (validation.pattern && value && !new RegExp(validation.pattern).test(value)) {
+    errors.push(`Field must match pattern ${validation.pattern}.`);
+  }
+  if (validation.required) {
+    const isUncheckedCheckbox = field.type === 'checkbox' && value === false;
+    const isUnsetValue = minDash.isNil(value) || value === '';
+    const isEmptyMultiselect = Array.isArray(value) && value.length === 0;
+    if (isUncheckedCheckbox || isUnsetValue || isEmptyMultiselect) {
+      errors.push('Field is required.');
+    }
+  }
+  if ('min' in validation && (value || value === 0) && value < validation.min) {
+    errors.push(`Field must have minimum value of ${validation.min}.`);
+  }
+  if ('max' in validation && (value || value === 0) && value > validation.max) {
+    errors.push(`Field must have maximum value of ${validation.max}.`);
+  }
+  if ('minLength' in validation && value && value.trim().length < validation.minLength) {
+    errors.push(`Field must have minimum length of ${validation.minLength}.`);
+  }
+  if ('maxLength' in validation && value && value.trim().length > validation.maxLength) {
+    errors.push(`Field must have maximum length of ${validation.maxLength}.`);
+  }
+  if ('validationType' in validation && value && validation.validationType === 'phone' && !PHONE_PATTERN.test(value)) {
+    errors.push('Field must be a valid  international phone number. (e.g. +4930664040900)');
+  }
+  if ('validationType' in validation && value && validation.validationType === 'email' && !EMAIL_PATTERN.test(value)) {
+    errors.push('Field must be a valid email.');
+  }
+  return errors;
+}
+function evaluateFEELValues(validate, expressionLanguage, expressionContextInfo) {
+  const evaluatedValidate = {
+    ...validate
+  };
+  VALIDATE_FEEL_PROPERTIES.forEach(property => {
+    const path = property.split('.');
+    const value = minDash.get(evaluatedValidate, path);
+    const evaluatedValue = runExpressionEvaluation(expressionLanguage, value, expressionContextInfo);
+    minDash.set(evaluatedValidate, path, evaluatedValue === null ? undefined : evaluatedValue);
+  });
+  return evaluatedValidate;
+}
+function oldEvaluateFEELValues(validate, expressionLanguage, conditionChecker, form) {
   const evaluatedValidate = {
     ...validate
   };
@@ -8324,6 +8428,10 @@ class FormFieldInstanceRegistry {
       valuePath,
       indexes
     };
+    this._eventBus.fire('formFieldInstanceRegistry.changed', {
+      instanceId,
+      action: 'added'
+    });
     return instanceId;
   }
   remove(instanceId) {
@@ -8331,6 +8439,10 @@ class FormFieldInstanceRegistry {
       return;
     }
     delete this._formFieldInstances[instanceId];
+    this._eventBus.fire('formFieldInstanceRegistry.changed', {
+      instanceId,
+      action: 'removed'
+    });
   }
   getAll() {
     return Object.values(this._formFieldInstances);
@@ -8339,9 +8451,13 @@ class FormFieldInstanceRegistry {
     return this.getAll().filter(({
       id
     }) => {
+      const formFieldDefinition = this._formFieldRegistry.get(id);
+      if (!formFieldDefinition) {
+        return false;
+      }
       const {
         type
-      } = this._formFieldRegistry.get(id);
+      } = formFieldDefinition;
       const {
         config
       } = this._formFields.get(type);
@@ -8601,11 +8717,12 @@ class Form {
     } = this._getState();
     const errors = {};
     const getErrorPath = (id, indexes) => [id, ...Object.values(indexes || {})];
-    formFieldInstanceRegistry.getAllKeyed().forEach(({
-      id,
-      valuePath,
-      indexes
-    }) => {
+    formFieldInstanceRegistry.getAllKeyed().forEach(fieldInstance => {
+      const {
+        id,
+        valuePath,
+        indexes
+      } = fieldInstance;
       const field = formFieldRegistry.get(id);
 
       // (1) Skip disabled fields
@@ -8613,9 +8730,9 @@ class Form {
         return;
       }
 
-      // (2) Validate the field
+      // (2) Validate the field instance
       const value = minDash.get(data, valuePath);
-      const fieldErrors = validator.validateField(field, value);
+      const fieldErrors = validator.validateFieldInstance(fieldInstance, value);
       if (fieldErrors.length) {
         minDash.set(errors, getErrorPath(field.id, indexes), fieldErrors);
       }
@@ -8720,26 +8837,26 @@ class Form {
   /**
    * @internal
    *
-   * @param { { field: any, indexes: object, value: any } } update
+   * @param { { fieldInstance: any, value: any } } update
    */
   _update(update) {
     const {
-      field,
-      indexes,
+      fieldInstance,
       value
     } = update;
+    const {
+      id,
+      valuePath,
+      indexes
+    } = fieldInstance;
     const {
       data,
       errors
     } = this._getState();
-    const validator = this.get('validator'),
-      pathRegistry = this.get('pathRegistry');
-    const fieldErrors = validator.validateField(field, value);
-    const valuePath = pathRegistry.getValuePath(field, {
-      indexes
-    });
+    const validator = this.get('validator');
+    const fieldErrors = validator.validateFieldInstance(fieldInstance, value);
     minDash.set(data, valuePath, value);
-    minDash.set(errors, [field.id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
+    minDash.set(errors, [id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
     this._emit('field.updated', update);
     this._setState({
       data: clone(data),
@@ -9006,6 +9123,7 @@ exports.iconsByType = iconsByType;
 exports.isRequired = isRequired;
 exports.pathParse = pathParse;
 exports.pathsEqual = pathsEqual;
+exports.runExpressionEvaluation = runExpressionEvaluation;
 exports.runRecursively = runRecursively;
 exports.sanitizeDateTimePickerValue = sanitizeDateTimePickerValue;
 exports.sanitizeHTML = sanitizeHTML;
@@ -9018,4 +9136,5 @@ exports.useExpressionEvaluation = useExpressionEvaluation;
 exports.useSingleLineTemplateEvaluation = useSingleLineTemplateEvaluation;
 exports.useTemplateEvaluation = useTemplateEvaluation;
 exports.wrapCSSStyles = wrapCSSStyles;
+exports.wrapObjectKeysWithUnderscores = wrapObjectKeysWithUnderscores;
 //# sourceMappingURL=index.cjs.map