How to Listen to Value Changes of a Specific Field by Its Path in Angular?

General
1

Hello everyone,

I am working with JSONForms in an Angular application, and I need to listen to value changes of a specific field by its path (e.g., #/properties/name). I am looking for a solution in jsonforms in angular.

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'number' },
  },
};

const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'Control',
      scope: '#/properties/name',
    },
    {
      type: 'Control',
      scope: '#/properties/age',
    },
  ],
};

I want to listen for changes on the name field using its path (#/properties/name) and log its new value whenever it changes.

2

Hi @sharopcha,

You can do so via a middleware. In it you can check the UPDATE_DATA actions for the modified path. See here for the documentation.

3

Thank you.
(I am aware it is not scope of this question) errors emitted on when I change form value. on init form it is not validating form. Here is what I do.

<jsonforms
      [data]="data"
      [schema]="schema()"
      [uischema]="uiSchema()"
      [renderers]="renderers()"
      [i18n]="i18nConfig"
      [ajv]="ajv"
      (errors)="onErrors($event)"
      (dataChange)="onFormValuChange($event)"
      validationMode="ValidateAndShow"

  ></jsonforms>

How can I validate form on form init?

4

You’re right, we are only emitting whenever there is a change, see here.

This is an oversight. Feel free to push a contribution to fix the issue. We should not only setup the subscription but also emit the data (in case defaults were applied) and errors initially.

As a hacky workaround you could access the JSON Forms component via @ViewChild and then access the internal state for example via this.jsonFormsComponent.jsonformsService._state.core.errors