Add error output to Angular component

- Add possibilities to subscribe to ajv errors - Update check to not reupdate the core on data change
eclipsesource · Jan 4, 2021 · 612a38a · 612a38a
1 parent f40e95b
commit 612a38a
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/packages/angular/src/jsonforms-root.component.ts b/packages/angular/src/jsonforms-root.component.ts
@@ -27,7 +27,7 @@ import {
     EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges
 } from '@angular/core';
 import { Actions, JsonFormsRendererRegistryEntry, JsonSchema, UISchemaElement, UISchemaTester, ValidationMode } from '@jsonforms/core';
-import { Ajv } from 'ajv';
+import { Ajv, ErrorObject } from 'ajv';
 import { JsonFormsAngularService, USE_STATE_VALUE } from './jsonforms.service';
 @Component({
     selector: 'jsonforms',
@@ -47,6 +47,10 @@ export class JsonForms implements OnChanges, OnInit {
     @Input() validationMode: ValidationMode;
     @Input() ajv: Ajv;
     @Input() config: any;
+    @Output() errors = new EventEmitter<ErrorObject[]>();
+
+    private previousData:any;
+    private previousErrors:ErrorObject[];
 
     private initialized = false;
 
@@ -70,9 +74,15 @@ export class JsonForms implements OnChanges, OnInit {
         });
         this.jsonformsService.$state.subscribe(state => {
             const data = state?.jsonforms?.core?.data;
-            if (data !== this.data) {
+            const errors = state?.jsonforms?.core?.errors;
+            if(this.previousData !== data) {
+                this.previousData = data;
                 this.dataChange.emit(data);
             }
+            if(this.previousErrors !== errors) {
+                this.previousErrors = errors;
+                this.errors.emit(errors);
+            }
         });
         this.initialized = true;
     }

diff --git a/packages/angular/src/jsonforms.service.ts b/packages/angular/src/jsonforms.service.ts
@@ -126,8 +126,10 @@ export class JsonFormsAngularService {
 
     updateCore<T extends CoreActions>(coreAction: T): T {
         const coreState = coreReducer(this._state.core, coreAction);
-        this._state.core = coreState;
-        this.updateSubject();
+        if(coreState !== this._state.core) {
+            this._state.core = coreState;
+            this.updateSubject();
+        }
         return coreAction;
     }
 
@@ -156,22 +158,28 @@ export class JsonFormsAngularService {
     setUiSchema(uischema: UISchemaElement | undefined): void {
         const newUiSchema = uischema ?? generateDefaultUISchema(this._state.core.schema);
         const coreState = coreReducer(this._state.core, Actions.updateCore(this._state.core.data, this._state.core.schema, newUiSchema));
-        this._state.core = coreState;
-        this.updateSubject();
+        if(coreState !== this._state.core) {
+            this._state.core = coreState;
+            this.updateSubject();
+        }
     }
 
     setSchema(schema: JsonSchema | undefined): void {
         const coreState = coreReducer(this._state.core,
             Actions.updateCore(this._state.core.data, schema ?? generateJsonSchema(this._state.core.data), this._state.core.uischema)
         );
-        this._state.core = coreState;
-        this.updateSubject();
+        if(coreState !== this._state.core) {
+            this._state.core = coreState;
+            this.updateSubject();
+        }
     }
 
     setData(data: any): void {
         const coreState = coreReducer(this._state.core, Actions.updateCore(data, this._state.core.schema, this._state.core.uischema));
-        this._state.core = coreState;
-        this.updateSubject();
+        if(coreState !== this._state.core) {
+            this._state.core = coreState;
+            this.updateSubject();
+        }
     }
 
     setLocale(locale: string): void {