jsonforms

jsonforms copied to clipboard

Is your feature request related to a problem? Please describe.

Hi, there is missing a control which allows to write a custom text and also allows to selected predefined values from some dropdown list.

Describe the solution you'd like

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
import { Actions, and, composeWithUi, ControlElement, isStringControl, Tester } from '@jsonforms/core';
import { hasOption } from './custom-testers';

export const suggestionControlTester: Tester =
  and(isStringControl, hasOption('suggestion'));

@Component({
  selector: 'SuggestionControlRenderer',
  templateUrl: './suggestion-control.renderer.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SuggestionControlRenderer extends JsonFormsControl {

  public options: string[] = [];

  constructor(jsonformsService: JsonFormsAngularService) {
    super(jsonformsService);
  }

  ngOnInit(): void {
    super.ngOnInit();
    this.options = this.uischema.options?.suggestion;
  }

  public getEventValue = (event: any) => event.target.value;

  onSelect(ev: MatAutocompleteSelectedEvent) {
    const path = composeWithUi(this.uischema as ControlElement, this.path);
    this.jsonFormsService.updateCore(Actions.update(path, () => ev.option.value));
    this.triggerValidation();
  }

}

<mat-form-field fxFlex [fxHide]="hidden">
    <mat-label>{{ label }}</mat-label>
    <input matInput type="text" [id]="id" (input)="onChange($event)" [formControl]="form" [matAutocomplete]="auto">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onSelect($event)">
        <mat-option *ngFor="let option of options" [value]="option">
            {{ option }}
        </mat-option>
    </mat-autocomplete>
    <mat-hint *ngIf="shouldShowUnfocusedDescription()">{{ description }}</mat-hint>
    <mat-error>{{ error }}</mat-error>
</mat-form-field>

Describe alternatives you've considered

It only works if use enum with the autocomplete control, but it doesn't allow me to write a custom text.

Framework

Angular

RendererSet

Material

Additional context

No response

Hi @zeroamps!

This looks good! Would you be willing to contribute this including a test case?