Integrate external errors in form

Add support for specifying external errors via `additionalErrors:
ajv.ErrorObject[]` prop.

The additional errors are merged with the validation errors and are
supplied to the affected controls. The additional errors are not
affected by the validationMode like the validation errors are and it is
the responsability of the framework user to update the prop when
applicable (e.g. on ValidationMode changes).

Fixes #1926

Author: AlexandraBuzila

packages/angular/src/jsonforms-root.component.ts

@@ -46,6 +46,7 @@ export class JsonForms implements OnChanges, OnInit {
     @Input() ajv: Ajv;
     @Input() config: any;
     @Input() i18n: JsonFormsI18nState;
+    @Input() additionalErrors: ErrorObject[];
     @Output() errors = new EventEmitter<ErrorObject[]>();
 
     private previousData:any;
@@ -64,7 +65,8 @@ export class JsonForms implements OnChanges, OnInit {
                 uischema: this.uischema,
                 schema: this.schema,
                 ajv: this.ajv,
-                validationMode: this.validationMode
+                validationMode: this.validationMode,
+                additionalErrors: this.additionalErrors
             },
             uischemas: this.uischemas,
             i18n: this.i18n,
@@ -128,14 +130,16 @@ export class JsonForms implements OnChanges, OnInit {
         const newValidationMode = changes.validationMode;
         const newAjv = changes.ajv;
         const newConfig = changes.config;
+        const newAdditionalErrors = changes.additionalErrors;
 
-        if (newData || newSchema || newUiSchema || newValidationMode || newAjv) {
+        if (newData || newSchema || newUiSchema || newValidationMode || newAjv || newAdditionalErrors) {
             this.jsonformsService.updateCoreState(
                 newData ? newData.currentValue : USE_STATE_VALUE,
                 newSchema ? newSchema.currentValue : USE_STATE_VALUE,
                 newUiSchema ? newUiSchema.currentValue : USE_STATE_VALUE,
                 newAjv ? newAjv.currentValue : USE_STATE_VALUE,
-                newValidationMode ? newValidationMode.currentValue : USE_STATE_VALUE
+                newValidationMode ? newValidationMode.currentValue : USE_STATE_VALUE,
+                newAdditionalErrors ? newAdditionalErrors.currentValue : USE_STATE_VALUE
             );
         }
 

packages/angular/src/jsonforms.service.ts

@@ -49,15 +49,15 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { JsonFormsBaseRenderer } from './base.renderer';
 
 import { cloneDeep } from 'lodash';
-import Ajv from 'ajv';
+import Ajv, { ErrorObject } from 'ajv';
 
 export const USE_STATE_VALUE = Symbol('Marker to use state value');
 export class JsonFormsAngularService {
 
     private _state: JsonFormsSubStates;
     private state: BehaviorSubject<JsonFormsState>;
 
-    init(initialState: JsonFormsSubStates = { core: { data: undefined, schema: undefined, uischema: undefined, validationMode: 'ValidateAndShow' } }) {
+    init(initialState: JsonFormsSubStates = { core: { data: undefined, schema: undefined, uischema: undefined, validationMode: 'ValidateAndShow', additionalErrors: undefined } }) {
         this._state = initialState;
         this._state.config = configReducer(undefined, setConfig(this._state.config));
         this._state.i18n = i18nReducer(this._state.i18n, updateI18n(this._state.i18n?.locale, this._state.i18n?.translate, this._state.i18n?.translateError));
@@ -209,15 +209,17 @@ export class JsonFormsAngularService {
         schema: JsonSchema | typeof USE_STATE_VALUE,
         uischema: UISchemaElement | typeof USE_STATE_VALUE,
         ajv: Ajv | typeof USE_STATE_VALUE,
-        validationMode: ValidationMode | typeof USE_STATE_VALUE
+        validationMode: ValidationMode | typeof USE_STATE_VALUE,
+        additionalErrors: ErrorObject[] | typeof USE_STATE_VALUE,
     ): void {
         const newData = data === USE_STATE_VALUE ? this._state.core.data : data;
         const newSchema = schema === USE_STATE_VALUE ? this._state.core.schema : schema ?? generateJsonSchema(newData);
         const newUischema = uischema === USE_STATE_VALUE ? this._state.core.uischema : uischema ?? generateDefaultUISchema(newSchema);
         const newAjv = ajv === USE_STATE_VALUE ? this._state.core.ajv : ajv;
         const newValidationMode = validationMode === USE_STATE_VALUE ? this._state.core.validationMode : validationMode;
+        const newAdditionalErrors = additionalErrors === USE_STATE_VALUE ? this._state.core.additionalErrors : additionalErrors;
         this.updateCore(
-            Actions.updateCore(newData, newSchema, newUischema, {ajv: newAjv, validationMode: newValidationMode})
+            Actions.updateCore(newData, newSchema, newUischema, {ajv: newAjv, validationMode: newValidationMode, additionalErrors: newAdditionalErrors})
         );
     }
 

packages/core/src/actions/actions.ts

@@ -100,6 +100,7 @@ export interface UpdateCoreAction {
 export interface InitActionOptions {
   ajv?: AJV;
   validationMode?: ValidationMode;
+  additionalErrors?: ErrorObject[];
 }
 
 export interface SetValidationModeAction {

packages/core/src/reducers/core.ts

@@ -65,6 +65,7 @@ export interface JsonFormsCore {
   schema: JsonSchema;
   uischema: UISchemaElement;
   errors?: ErrorObject[];
+  additionalErrors?: ErrorObject[];
   validator?: ValidateFunction;
   ajv?: Ajv;
   validationMode?: ValidationMode;
@@ -78,6 +79,7 @@ const initState: JsonFormsCore = {
   validator: undefined,
   ajv: undefined,
   validationMode: 'ValidateAndShow',
+  additionalErrors: []
 };
 
 const reuseAjvForSchema = (ajv: Ajv, schema: JsonSchema): Ajv => {
@@ -133,6 +135,23 @@ const hasValidationModeOption = (option: any): option is InitActionOptions => {
   return false;
 };
 
+const hasAdditionalErrorsOption = (option: any): option is InitActionOptions => {
+  if (option) {
+    return option.additionalErrors !== undefined;
+  }
+  return false;
+};
+
+const getAdditionalErrors = (
+  state: JsonFormsCore,
+  action?: InitAction | UpdateCoreAction
+): ErrorObject[] => {
+  if (action && hasAdditionalErrorsOption(action.options)) {
+    return action.options.additionalErrors;
+  }
+  return state.additionalErrors;
+};
+
 // tslint:disable-next-line: cyclomatic-complexity
 export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
   state = initState,
@@ -145,12 +164,14 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       const validationMode = getValidationMode(state, action);
       const v = validationMode === 'NoValidation' ? undefined : thisAjv.compile(action.schema);
       const e = validate(v, action.data);
+      const additionalErrors = getAdditionalErrors(state, action);
 
       return {
         ...state,
         data: action.data,
         schema: action.schema,
         uischema: action.uischema,
+        additionalErrors,
         errors: e,
         validator: v,
         ajv: thisAjv,
@@ -176,6 +197,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       } else if (state.data !== action.data) {
         errors = validate(validator, action.data);
       }
+      const additionalErrors = getAdditionalErrors(state, action);
 
       const stateChanged =
         state.data !== action.data ||
@@ -184,7 +206,8 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         state.ajv !== thisAjv ||
         state.errors !== errors ||
         state.validator !== validator ||
-        state.validationMode !== validationMode
+        state.validationMode !== validationMode ||
+        state.additionalErrors !== additionalErrors
       return stateChanged
         ? {
             ...state,
@@ -195,6 +218,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
             errors: isEqual(errors, state.errors) ? state.errors : errors,
             validator: validator,
             validationMode: validationMode,
+            additionalErrors
           }
         : state;
     }
@@ -391,8 +415,11 @@ const getErrorsAt = (
   instancePath: string,
   schema: JsonSchema,
   matchPath: (path: string) => boolean
-) => (state: JsonFormsCore): ErrorObject[] =>
-  errorsAt(instancePath, schema, matchPath)(state.validationMode === 'ValidateAndHide' ? [] : state.errors);
+) => (state: JsonFormsCore): ErrorObject[] => {
+  const errors = state.errors ?? [];
+  const additionalErrors = state.additionalErrors ?? [];
+  return errorsAt(instancePath, schema, matchPath)(state.validationMode === 'ValidateAndHide' ? [...additionalErrors] : [...errors, ...additionalErrors]);
+}
 
 export const errorAt = (instancePath: string, schema: JsonSchema) =>
   getErrorsAt(instancePath, schema, path => path === instancePath);