@gluonjs/core / packages/json-forms/src / JsonFormsMessageProvider

Interface: JsonFormsMessageProvider

Typed locale-aware messages used by the JSON Forms infrastructure copy.

Properties

locale

readonly locale: string

Methods

addItemLabel()

addItemLabel(): string

Returns

string

---

configurationMessage()

configurationMessage(error): string

Parameters

error

JsonFormValidationError

Returns

string

---

formatNumber()

formatNumber(value, options?): string

Parameters

value

number

options?

NumberFormatOptions

Returns

string

---

itemLabel()

itemLabel(index): string

Parameters

index

number

Returns

string

---

removeItemLabel()

removeItemLabel(index): string

Parameters

index

number

Returns

string

---

rootLabel()

rootLabel(): string

Returns

string

---

selectPlaceholder()

selectPlaceholder(required): string

Parameters

required

boolean

Returns

string

---

validationMessage()

validationMessage(error): string

Parameters

error

JsonFormValidationError

Returns

string

Example

Pass a complete synchronous message and locale-formatting boundary to the form element or render helper:

import {
  createJsonFormsMessageProvider,
  createJsonFormsRendererRegistry,
  isJsonFormsRendererRegistry,
  JsonForm,
  JsonSchemaResolutionError,
  jsonFormsTag,
  registerJsonForms,
  resolveJsonSchema,
  type JsonFormChangeDetail,
  type JsonFormField,
  type JsonFormOptions,
  type JsonFormsElement,
  type JsonFormsMessageOverrides,
  type JsonFormsMessageProvider,
  type JsonFormsMessageProviderOptions,
  type JsonFormsRendererContext,
  type JsonFormsRendererControl,
  type JsonFormsRendererKind,
  type JsonFormsRendererRegistration,
  type JsonFormsRendererSelector,
  type JsonFormsUiSchema,
  type JsonFormValidationChangeDetail,
  type JsonFormValidationError,
  type JsonObject,
  type JsonSchema,
  type JsonSchemaResolutionOptions,
  type JsonValue,
} from '@gluonjs/json-forms';

const schema = { type: 'object', properties: { email: { $ref: '#/$defs/email' }, delivery: { type: 'string', enum: ['morning', 'afternoon'] } }, required: ['email'], $defs: { email: { type: 'string', format: 'email' } } } satisfies JsonSchema;
const referenceOptions = { maxDepth: 8, maxNodes: 64 } satisfies JsonSchemaResolutionOptions;
const resolvedSchema = resolveJsonSchema(schema, referenceOptions);
const referenceError = new JsonSchemaResolutionError('ref-pointer', 'Invalid reference.');
const uischema = { type: 'VerticalLayout', elements: [{ type: 'Control', scope: '#/properties/email', label: 'Email address' }, { type: 'Control', scope: '#/properties/delivery' }] } satisfies JsonFormsUiSchema;
const data = { email: 'hello@example.test', delivery: 'morning' } satisfies JsonObject;
const value: JsonValue = data.delivery;
const errors: readonly JsonFormValidationError[] = [];
const change: JsonFormChangeDetail = { data, errors };
const validation: JsonFormValidationChangeDetail = { valid: true, errors };
const messageOverrides = { selectPlaceholder: (required: boolean) => required ? 'Choose one' : 'No selection' } satisfies JsonFormsMessageOverrides;
const messageOptions = { locale: 'en-GB', messages: messageOverrides } satisfies JsonFormsMessageProviderOptions;
const messages: JsonFormsMessageProvider = createJsonFormsMessageProvider(messageOptions);
const rendererKind: JsonFormsRendererKind = 'select';
const rendererSelector = { kind: rendererKind, path: ['delivery'] } satisfies JsonFormsRendererSelector;
const rendererRegistration = { id: 'delivery-summary', selector: rendererSelector, priority: 10, render: (context: JsonFormsRendererContext) => String(context.value ?? '') } satisfies JsonFormsRendererRegistration;
const rendererRegistry = createJsonFormsRendererRegistry([rendererRegistration]);

registerJsonForms();
const element = document.createElement(jsonFormsTag) as JsonFormsElement;
element.schema = schema;
element.uischema = uischema;
element.data = data;
element.messages = messages;
element.rendererRegistry = rendererRegistry;
const rendererControl: JsonFormsRendererControl | undefined = undefined;
const field: JsonFormField | undefined = undefined;
const options = { schema, uischema, data, messages, rendererRegistry, onChange: (event) => console.log(event.detail.data), onValidationChange: (event) => console.log(event.detail.valid) } satisfies JsonFormOptions;
const view = JsonForm(options);
console.log(element.value, value, change, validation, isJsonFormsRendererRegistry(rendererRegistry), rendererControl, field, view, resolvedSchema, referenceError.keyword);