support for date-time control in Angular

[zeroamps]

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

Hi, there is missing a support for date-time control in Angular. There is for date and time but date-time is missing.

Describe the solution you'd like

I have created something like this like a workaround.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
import { and, isStringControl, optionIs, Tester } from '@jsonforms/core';

export const dateTimeControlTester: Tester =
  and(isStringControl, optionIs('format', 'date-time'));

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

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

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

}

<mat-form-field fxFlex [fxHide]="hidden">
    <mat-label>{{ label }}</mat-label>
    <input matInput type="text" [id]="id" [ngxMatDatetimePicker]="picker" (dateInput)="onChange($event)"
        [formControl]="form">
    <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #picker [showSeconds]="true"></ngx-mat-datetime-picker>
    <mat-hint *ngIf="shouldShowUnfocusedDescription()">{{ description }}</mat-hint>
    <mat-error>{{ error }}</mat-error>
</mat-form-field>

Describe alternatives you've considered

I couldn't find any alternative to the custom renderer.

Framework

Angular

RendererSet

Material

Additional context

No response

[sdirix]

Hi @zeroamps!

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