Angular Material: Translate Autocomplete Control Renderer by daniel-shuy · Pull Request #2535 · eclipsesource/jsonforms

daniel-shuy · 2026-01-21T10:39:36Z

Background

The company I work for (SICPA Product Security) is considering adopting JSON Forms for a project.

Unfortunately the project is written in Angular, and I noticed that the Angular Material renderer set is missing quite a lot of supported features compared to the React/Vue renderer sets.

As such, I have been testing the Angular Material renderer set quite thoroughly, and will be contributing some missing features, especially to the Angular Material renderer set.

Description

The Angular Material renderer set renders enums using the AutocompleteControlRenderer.

Unlike the other renderer sets, AutocompleteControlRenderer does not translate the enum values.

This PR updates AutocompleteControlRenderer to use mapStateToEnumControlProps(JsonFormsState, OwnPropsOfControl & OwnPropsOfEnum) like the other renderer sets, which translates the enum values as labels, while keeping the original values as the values:

jsonforms/packages/core/src/mappers/renderer.ts

Lines 676 to 707 in e642b3d

    
           /** 
        
            * Default mapStateToCellProps for enum control. Options is used for populating dropdown list 
        
            * @param state 
        
            * @param ownProps 
        
            * @returns {StatePropsOfControl & OwnPropsOfEnum} 
        
            */ 
        
           export const mapStateToEnumControlProps = ( 
        
             state: JsonFormsState, 
        
             ownProps: OwnPropsOfControl & OwnPropsOfEnum 
        
           ): StatePropsOfControl & OwnPropsOfEnum => { 
        
             const props: StatePropsOfControl = mapStateToControlProps(state, ownProps); 
        
             const options: EnumOption[] = 
        
               ownProps.options || 
        
               props.schema.enum?.map((e) => 
        
                 enumToEnumOptionMapper( 
        
                   e, 
        
                   getTranslator()(state), 
        
                   getI18nKeyPrefix(props.schema, props.uischema, props.path) 
        
                 ) 
        
               ) || 
        
               (props.schema.const && [ 
        
                 enumToEnumOptionMapper( 
        
                   props.schema.const, 
        
                   getTranslator()(state), 
        
                   getI18nKeyPrefix(props.schema, props.uischema, props.path) 
        
                 ), 
        
               ]); 
        
             return { 
        
               ...props, 
        
               options, 
        
             }; 
        
           };

For backwards compatibility, I've allowed the options @Input to still take in string[] (by typing it as EnumOption[] | string[]), but it will not be translated if a string[] is passed.

netlify · 2026-01-21T10:39:41Z

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	`f6fe0f2`
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/699ef76bf703a70008f594ef
😎 Deploy Preview	https://deploy-preview-2535--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

CLAassistant · 2026-01-21T10:39:43Z

All committers have signed the CLA.

sdirix · 2026-01-22T08:03:04Z

Hi @daniel-shuy,

You are right, the Angular Material renderer set is the most inconsistent one with the most missing features. Happy to review your contribution(s) ❤️

lucas-koehler

Hi @daniel-shuy Thanks for the contribution and extending the tests ❤️ . Allowing translation of the values defintely makes sense!
I have two comments inline. Pease have a look.

packages/angular-material/src/library/controls/autocomplete.renderer.ts

packages/angular-material/test/autocomplete-control.spec.ts

coveralls · 2026-02-03T08:31:59Z

coverage: 82.803% (+0.005%) from 82.798%
when pulling 5302153 on daniel-shuy:angular-material/translate-autocomplete-control-renderer
into 563015d on eclipsesource:master.

lucas-koehler

Misclicked before, sorry:

Hi @daniel-shuy ,
thanks for the update!
Unfortunately, it seems that something is broken now:
Looking at the Enums example in the preview https://deploy-preview-2535--jsonforms-examples.netlify.app/angular-material/ selecting a value does not update the value for me. On the master preview this works fine for me.
Can you have a look?

daniel-shuy · 2026-02-03T09:27:30Z

@lucas-koehler sorry, I had some leftover code that depended on displayWith. I've removed it, please try again

lucas-koehler

Hi @daniel-shuy , thanks for the update! Generally, the enum controls work again. However, after selecting a value, the untranslated value is shown in the enum control while the dropdown (correctly) shows the translated values.
This should be aligned to also show the translated value in the input. This is for instance already the case in the react-material renderer set.

Find attached an enum i18n example to test this. You can also add this example to the PR.

enum-i18n.patch

daniel-shuy · 2026-02-04T03:50:01Z

@lucas-koehler Ah, now I remember why I needed displayWith. This is challenging as I'm trying to not break backwards compatibility by keeping the data and FormControl value type as string, but it looks like I will need to change it to EnumOption to translate the input label, which is a breaking change for those who use the internal JSON Forms API. Is that acceptable?

I'll also update the tests to assert that the input label is correctly translated.

lucas-koehler · 2026-02-05T14:24:53Z

Hi @daniel-shuy ,
I'd say it's acceptable to break the API here as long as it only affects this renderer resp. renderer set. We do not want to change the core behavior of JSON Forms :)

…nput event tests

daniel-shuy · 2026-02-10T03:18:54Z

@lucas-koehler Great! I've made the changes and updated the tests, it should work now

lucas-koehler

Thank you for the updates but something is still missing.
When I select an option in the enum i18n example at the preview https://deploy-preview-2535--jsonforms-examples.netlify.app/angular-material/ the control stays empty:

jf-angular-enums.webm

daniel-shuy · 2026-02-25T09:07:43Z

@lucas-koehler sorry for the delay, I was away on holiday last week.

I've finally managed to fix all the issues. Now I understand why this hasn't been implemented, the Angular Material mat-autocomplete API is so insanely complex 😅

lucas-koehler

Hi @daniel-shuy , no worries about the delay - we're not in a rush :D
Thanks for the updates! The renderer now works for me 🚀 I pushed an update for the tests because they should test persisting the enum value - not the enumoption.

Besides that I have a few small suggestions inline. Please have a look :)

lucas-koehler · 2026-02-25T13:00:03Z

packages/angular-material/src/library/controls/autocomplete.renderer.ts


+  override onChange(ev: any) {
+    const eventValue = this.getEventValue(ev);
+    const option = Array.from(this.valuesToTranslatedOptions?.values()).find(


Array.from(undefined) throws an error, thus have a safe fallback:

Suggested change

const option = Array.from(this.valuesToTranslatedOptions?.values()).find(

const option = Array.from(this.valuesToTranslatedOptions?.values() ?? []).find(

lucas-koehler · 2026-02-25T13:02:50Z

packages/angular-material/src/library/controls/autocomplete.renderer.ts


+  override mapAdditionalProps(_props: StatePropsOfControl & OwnPropsOfEnum) {
+    this.valuesToTranslatedOptions = new Map(
+      _props.options.map((option) => [option.value, option])


Options may be undefined.

Suggested change

_props.options.map((option) => [option.value, option])

(_props.options ?? []).map((option) => [option.value, option])

lucas-koehler · 2026-02-25T13:05:40Z

packages/angular-material/src/library/controls/autocomplete.renderer.ts

+
+    if (typeof option === 'string') {
+      if (!this.valuesToTranslatedOptions) {
+        return '';


We should rather show the raw, untranslated value than nothing as long as the translation is not available. Or do you see any issues with that?

Suggested change

return '';

return option; // show raw value until translations are ready

lucas-koehler · 2026-02-25T13:07:08Z

packages/angular-material/src/library/controls/autocomplete.renderer.ts

+  trackByEnumOptionId(_index: number, option: EnumOption): string {
+    return option.value;
+  }


This method seems to be unused now. Can it be removed?

lucas-koehler self-requested a review January 30, 2026 11:39

lucas-koehler requested changes Jan 30, 2026

View reviewed changes

packages/angular-material/src/library/controls/autocomplete.renderer.ts Outdated Show resolved Hide resolved

packages/angular-material/test/autocomplete-control.spec.ts Show resolved Hide resolved

daniel-shuy force-pushed the angular-material/translate-autocomplete-control-renderer branch 2 times, most recently from 21eaaba to a7d33df Compare February 3, 2026 08:16

This comment was marked as outdated.

Sign in to view

lucas-koehler requested changes Feb 3, 2026

View reviewed changes

daniel-shuy force-pushed the angular-material/translate-autocomplete-control-renderer branch from a7d33df to 83360e7 Compare February 3, 2026 08:58

lucas-koehler requested changes Feb 3, 2026

View reviewed changes

angular-material: Assert input value in AutocompleteControlRenderer i…

e9bc501

…nput event tests

daniel-shuy force-pushed the angular-material/translate-autocomplete-control-renderer branch 2 times, most recently from 68fd15d to 5302153 Compare February 10, 2026 03:16

lucas-koehler requested changes Feb 10, 2026

View reviewed changes

daniel-shuy force-pushed the angular-material/translate-autocomplete-control-renderer branch from 5302153 to 36c55fe Compare February 24, 2026 07:40

daniel-shuy added 2 commits February 25, 2026 16:55

angular-material: Translate enum for AutocompleteControlRenderer

59bffe4

examples: Add enumI18n example

995e0ff

daniel-shuy force-pushed the angular-material/translate-autocomplete-control-renderer branch from 36c55fe to 995e0ff Compare February 25, 2026 09:02

daniel-shuy requested a review from lucas-koehler February 25, 2026 09:07

fix: tests should not use EnumOption but persist value

f6fe0f2

lucas-koehler reviewed Feb 25, 2026

View reviewed changes

	/**
	* Default mapStateToCellProps for enum control. Options is used for populating dropdown list
	* @param state
	* @param ownProps
	* @returns {StatePropsOfControl & OwnPropsOfEnum}
	*/
	export const mapStateToEnumControlProps = (
	state: JsonFormsState,
	ownProps: OwnPropsOfControl & OwnPropsOfEnum
	): StatePropsOfControl & OwnPropsOfEnum => {
	const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
	const options: EnumOption[] =
	ownProps.options \|\|
	props.schema.enum?.map((e) =>
	enumToEnumOptionMapper(
	e,
	getTranslator()(state),
	getI18nKeyPrefix(props.schema, props.uischema, props.path)
	)
	) \|\|
	(props.schema.const && [
	enumToEnumOptionMapper(
	props.schema.const,
	getTranslator()(state),
	getI18nKeyPrefix(props.schema, props.uischema, props.path)
	),
	]);
	return {
	...props,
	options,
	};
	};

	const option = Array.from(this.valuesToTranslatedOptions?.values()).find(
	const option = Array.from(this.valuesToTranslatedOptions?.values() ?? []).find(

	_props.options.map((option) => [option.value, option])
	(_props.options ?? []).map((option) => [option.value, option])

	return '';
	return option; // show raw value until translations are ready

Conversation

daniel-shuy commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Description

Uh oh!

netlify bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for jsonforms-examples ready!

Uh oh!

CLAassistant commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sdirix commented Jan 22, 2026

Uh oh!

lucas-koehler left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coveralls commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

lucas-koehler left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

daniel-shuy commented Feb 3, 2026

Uh oh!

lucas-koehler left a comment

Choose a reason for hiding this comment

Uh oh!

daniel-shuy commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucas-koehler commented Feb 5, 2026

Uh oh!

daniel-shuy commented Feb 10, 2026

Uh oh!

lucas-koehler left a comment

Choose a reason for hiding this comment

Uh oh!

daniel-shuy commented Feb 25, 2026

Uh oh!

lucas-koehler left a comment

Choose a reason for hiding this comment

Uh oh!

lucas-koehler Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

lucas-koehler Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

lucas-koehler Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

lucas-koehler Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

daniel-shuy commented Jan 21, 2026 •

edited

Loading

netlify bot commented Jan 21, 2026 •

edited

Loading

CLAassistant commented Jan 21, 2026 •

edited

Loading

coveralls commented Feb 3, 2026 •

edited

Loading

lucas-koehler left a comment •

edited

Loading

daniel-shuy commented Feb 4, 2026 •

edited

Loading