How to remove comma separator from an integer (Angular)

General
1

Hi all,
I am using jsonforms and I have an integer type in my schema.
The part of the schema is the following

"socket_port": {
      "type": "integer",
      "description": "The destination port.",
      "minimum": 0,
      "maximum": 65535
    },

the corresponding uischema is the following:

{
                  "type": "Control",
                  "scope": "#/properties/socket_port"
                }

My issue is that I do not want the comma or any other separator in the integer. For instance, I want to have 8080 instead of 8,080

I tried to use the locale property in the jsonforms element but it does not work in Angular.
Do you have any recommendation?

2

Hi @sakis_aj,

The decimal separator is hard coded into our number control. So you will need to implement and register a custom number renderer which does not use a separator. You can either replace all number fields or only use the one for the ports.

3

Hi @sdirix,
thank you very much for the answer. I am going to try it.

4

Hi @sdirix,
I posted the solution here in case someone needs to remove the decimal separator from all integer fields.
This was a simple solution, I had just to add this input field. It worked in my environment.

custom-integer-control.renderer.html

<mat-form-field [fxHide]="hidden" fxFlex>
  <mat-label>{{ label }}</mat-label>
  <input [formControl]="form" [id]="id" matInput/>
  <mat-hint *ngIf="shouldShowUnfocusedDescription()">{{ description }}</mat-hint>
  <mat-error>{{ error }}</mat-error>
</mat-form-field>

custom-integer-control.renderer.ts

import {ChangeDetectionStrategy, Component} from '@angular/core';
import {JsonFormsAngularService, JsonFormsControl} from '@jsonforms/angular';
import {and, isIntegerControl, RankedTester, rankWith} from '@jsonforms/core';


export const customNumberControlTester: RankedTester = rankWith(
  5,
  and(isIntegerControl)
);

@Component({
  selector: 'CustomIntegerControlRenderer',
  templateUrl: './custom-integer-control.renderer.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
// tslint:disable-next-line:component-class-suffix
export class CustomIntegerControlRenderer extends JsonFormsControl {
  constructor(jsonformsService: JsonFormsAngularService) {
    super(jsonformsService);
  }

}
1 Like
5

Thanks for sharing! Looks good!