Skip to content

Angular Material: OneOf Enum Control Renderer #2551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
daniel-shuy wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Angular Material: OneOf Enum Control Renderer #2551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
815ba6e
angular-material: Rename AutocompleteControlRenderer to EnumControlRe…
daniel-shuy Jan 21, 2026
40535b6
angular-material: Add OneOfEnumControlRenderer
daniel-shuy Jan 21, 2026
8a19821
angular-material: Fix @typescript-eslint/no-non-null-assertion violat…
daniel-shuy Mar 12, 2026
bf1d6ed
angular-material: Fix @angular-eslint/template/eqeqeq violation
daniel-shuy Mar 12, 2026
bed6dd0
Use constant literal template/style string instead of HTML/SCSS files
daniel-shuy Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 91 additions & 65 deletions ...library/controls/autocomplete.renderer.ts → ...ial/src/library/controls/enum.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@ import {
ControlElement,
EnumOption,
isEnumControl,
isOneOfEnumControl,
JsonFormsState,
mapStateToEnumControlProps,
mapStateToOneOfEnumControlProps,
OwnPropsOfControl,
OwnPropsOfEnum,
RankedTester,
Expand All @@ -52,51 +54,53 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';

@Component({
selector: 'AutocompleteControlRenderer',
template: `
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
<mat-label>{{ label }}</mat-label>
<input
matInput
type="text"
(change)="onChange($event)"
[id]="id"
[formControl]="form"
[matAutocomplete]="auto"
(keydown)="updateFilter($event)"
(focus)="focused = true"
(focusout)="focused = false"
/>
<mat-autocomplete
autoActiveFirstOption
#auto="matAutocomplete"
(optionSelected)="onSelect($event)"
[displayWith]="displayFn"
>
@for (option of filteredOptions | async; track option.value) {
<mat-option [value]="option">
{{ option.label }}
</mat-option>
}
</mat-autocomplete>
<mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
description
}}</mat-hint>
<mat-error>{{ error }}</mat-error>
</mat-form-field>
`,
styles: [
`
:host {
display: flex;
flex-direction: row;
}
mat-form-field {
flex: 1 1 auto;
const template = `
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
<mat-label>{{ label }}</mat-label>
<input
matInput
type="text"
(change)="onChange($event)"
[id]="id"
[formControl]="form"
[matAutocomplete]="auto"
(keydown)="updateFilter($event)"
(focus)="focused = true"
(focusout)="focused = false"
/>
<mat-autocomplete
autoActiveFirstOption
#auto="matAutocomplete"
(optionSelected)="onSelect($event)"
[displayWith]="displayFn"
>
@for (option of filteredOptions | async; track option.value) {
<mat-option [value]="option">
{{ option.label }}
</mat-option>
}
`,
],
</mat-autocomplete>
<mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
description
}}</mat-hint>
<mat-error>{{ error }}</mat-error>
</mat-form-field>
`;

const style = `
:host {
display: flex;
flex-direction: row;
}
mat-form-field {
flex: 1 1 auto;
}
`;

@Component({
selector: 'OneOfEnumControlRenderer',
template,
styles: [style],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
CommonModule,
Expand All @@ -106,11 +110,11 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
MatAutocompleteModule,
],
})
export class AutocompleteControlRenderer
export class OneOfEnumControlRenderer
extends JsonFormsControl
implements OnInit
{
@Input() options?: EnumOption[] | string[];
@Input() options?: EnumOption[];
valuesToTranslatedOptions?: Map<string, EnumOption>;
filteredOptions: Observable<EnumOption[]>;
shouldFilter: boolean;
Expand All @@ -123,7 +127,7 @@ export class AutocompleteControlRenderer
protected override mapToProps(
state: JsonFormsState
): StatePropsOfControl & OwnPropsOfEnum {
return mapStateToEnumControlProps(state, this.getOwnProps());
return mapStateToOneOfEnumControlProps(state, this.getOwnProps());
}

getEventValue = (event: any) => event.target.value;
Expand Down Expand Up @@ -209,29 +213,51 @@ export class AutocompleteControlRenderer
protected getOwnProps(): OwnPropsOfControl & OwnPropsOfEnum {
return {
...super.getOwnProps(),
options: this.stringOptionsToEnumOptions(this.options),
options: this.options,
};
}
}

/**
* For {@link options} input backwards compatibility
*/
protected stringOptionsToEnumOptions(
options: typeof this.options
): EnumOption[] | undefined {
if (!options) {
return undefined;
}
export const oneOfEnumControlTester: RankedTester = rankWith(
5,
isOneOfEnumControl
);

@Component({
selector: 'EnumControlRenderer, AutocompleteControlRenderer',
template,
styles: [style],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
CommonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatAutocompleteModule,
],
})
export class EnumControlRenderer extends OneOfEnumControlRenderer {
// eslint-disable-next-line @angular-eslint/no-input-rename
@Input('options')
set stringOptions(strOptions: string[]) {
this.options = strOptions.map((str) => {
return {
label: str,
value: str,
};
});
}
Comment on lines +239 to +249
Copy link
Copy Markdown
Member

@sdirix sdirix Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The old AutocompleteControlRenderer accepted EnumOption[] | string[] via @Input. This setter only handles string[]. If someone has <AutocompleteControlRenderer [options]="enumOptionArray">, the setter will silently produce garbage.

We should remove the old component completely so they get an obvious error or make it backward compatible. If we remove it, we should mention it in the migration guide

Copy link
Copy Markdown
Contributor Author

@daniel-shuy daniel-shuy Apr 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, the @Input was previously changed by me in a previous PR (#2535) from string[] to EnumOption[] | string[] so that users can pass in options with different labels from their values to the AutocompleteControlRenderer. I reverted that change since the new OneOfEnumControlRenderer should be used for that purpose instead.

Since #2535 is not part of any release, the @Input type can be safely reverted back to string[].


return options.every((item) => typeof item === 'string')
? options.map((str) => {
return {
label: str,
value: str,
} satisfies EnumOption;
})
: options;
protected override mapToProps(
state: JsonFormsState
): StatePropsOfControl & OwnPropsOfEnum {
return mapStateToEnumControlProps(state, this.getOwnProps());
}
}

/**
* For {@link AutocompleteControlRenderer} class name backwards compatibility
*/
export { EnumControlRenderer as AutocompleteControlRenderer };

export const enumControlTester: RankedTester = rankWith(2, isEnumControl);
2 changes: 1 addition & 1 deletion packages/angular-material/src/library/controls/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,4 @@ export * from './number.renderer';
export * from './range.renderer';
export * from './date.renderer';
export * from './toggle.renderer';
export * from './autocomplete.renderer';
export * from './enum.renderer';
9 changes: 6 additions & 3 deletions packages/angular-material/src/library/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,11 @@ import {
ToggleControlRendererTester,
} from './controls/toggle.renderer';
import {
AutocompleteControlRenderer,
EnumControlRenderer,
enumControlTester,
} from './controls/autocomplete.renderer';
OneOfEnumControlRenderer,
oneOfEnumControlTester,
} from './controls/enum.renderer';
import {
ObjectControlRenderer,
ObjectControlRendererTester,
Expand Down Expand Up @@ -106,7 +108,8 @@ export const angularMaterialRenderers: {
{ tester: RangeControlRendererTester, renderer: RangeControlRenderer },
{ tester: DateControlRendererTester, renderer: DateControlRenderer },
{ tester: ToggleControlRendererTester, renderer: ToggleControlRenderer },
{ tester: enumControlTester, renderer: AutocompleteControlRenderer },
{ tester: enumControlTester, renderer: EnumControlRenderer },
{ tester: oneOfEnumControlTester, renderer: OneOfEnumControlRenderer },
{ tester: ObjectControlRendererTester, renderer: ObjectControlRenderer },
// layouts
{ tester: verticalLayoutTester, renderer: VerticalLayoutRenderer },
Expand Down
11 changes: 8 additions & 3 deletions packages/angular-material/src/library/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,12 @@ import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { JsonFormsModule } from '@jsonforms/angular';
import { AutocompleteControlRenderer } from './controls/autocomplete.renderer';
import { BooleanControlRenderer } from './controls/boolean.renderer';
import { DateControlRenderer } from './controls/date.renderer';
import {
EnumControlRenderer,
OneOfEnumControlRenderer,
} from './controls/enum.renderer';
import { NumberControlRenderer } from './controls/number.renderer';
import { RangeControlRenderer } from './controls/range.renderer';
import { TextAreaRenderer } from './controls/textarea.renderer';
Expand Down Expand Up @@ -104,7 +107,8 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
MasterListComponent,
JsonFormsDetailComponent,
ObjectControlRenderer,
AutocompleteControlRenderer,
EnumControlRenderer,
OneOfEnumControlRenderer,
TableRenderer,
ArrayLayoutRenderer,
LayoutChildrenRenderPropsPipe,
Expand Down Expand Up @@ -144,7 +148,8 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
MasterListComponent,
JsonFormsDetailComponent,
ObjectControlRenderer,
AutocompleteControlRenderer,
EnumControlRenderer,
OneOfEnumControlRenderer,
TableRenderer,
ArrayLayoutRenderer,
LayoutChildrenRenderPropsPipe,
Expand Down
2 changes: 1 addition & 1 deletion packages/angular-material/src/library/other/master-detail/master.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const removeSchemaKeywords = (path: string) => {
mat-icon-button
class="button item-button hide"
(click)="onDeleteClick(i)"
[ngClass]="{ show: highlightedIdx == i }"
[ngClass]="{ show: highlightedIdx === i }"
*ngIf="isEnabled()"
>
<mat-icon mat-list-icon>delete</mat-icon>
Expand Down
12 changes: 6 additions & 6 deletions packages/angular-material/test/array-layout.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,11 +125,11 @@ describe('Array layout', () => {

const arrayLayoutElement: HTMLElement = fixture.nativeElement;
const matBadgeElement =
arrayLayoutElement.querySelector('.mat-badge-content')!;
arrayLayoutElement.querySelector('.mat-badge-content');

const noDataElement = arrayLayoutElement.children[0].children[1];

expect(matBadgeElement.textContent).toBe('1');
expect(matBadgeElement?.textContent).toBe('1');
expect(noDataElement.textContent).toBe('No data');
});
});
Expand All @@ -149,9 +149,9 @@ describe('Array layout', () => {

const arrayLayoutElement: HTMLElement = fixture.nativeElement;
const matBadgeElement =
arrayLayoutElement.querySelector('.mat-badge-content')!;
arrayLayoutElement.querySelector('.mat-badge-content');

expect(matBadgeElement.textContent).toBe('2');
expect(matBadgeElement?.textContent).toBe('2');
});
});

Expand All @@ -170,9 +170,9 @@ describe('Array layout', () => {

const arrayLayoutElement: HTMLElement = fixture.nativeElement;
const matBadgeElement =
arrayLayoutElement.querySelector('.mat-badge-content')!;
arrayLayoutElement.querySelector('.mat-badge-content');

expect(matBadgeElement.textContent).toBe('4');
expect(matBadgeElement?.textContent).toBe('4');
});
});
});
Loading
Loading