# How to remove comma separator from an integer (Angular)

**URL:** <https://jsonforms.discourse.group/t/how-to-remove-comma-separator-from-an-integer-angular/1082>\
**Category:** General\
**Created:** [October 15, 2022, 5:30pm UTC](https://jsonforms.discourse.group/t/how-to-remove-comma-separator-from-an-integer-angular/1082 "2022-10-15T17:30:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sakis\_aj](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sakis_aj/32/522_2.png) [@sakis\_aj](https://jsonforms.discourse.group/u/sakis_aj)\
**Post date:** [October 15, 2022, 5:30pm UTC](https://jsonforms.discourse.group/t/how-to-remove-comma-separator-from-an-integer-angular/1082/1 "2022-10-15T17:30:19Z")

</div>

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

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

```

the corresponding uischema is the following:

```auto
{
                  "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?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 17, 2022, 7:44am UTC](https://jsonforms.discourse.group/t/how-to-remove-comma-separator-from-an-integer-angular/1082/2 "2022-10-17T07:44:37Z")

</div>

Hi @sakis_aj,

The decimal separator is hard coded into our [number control](https://github.com/eclipsesource/jsonforms/blob/20e9e0fd72bb388611d7387e1f533d66b7839041/packages/angular-material/src/controls/number.renderer.ts). 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.

---

<div class="post-metadata">

**Author:** ![sakis\_aj](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sakis_aj/32/522_2.png) [@sakis\_aj](https://jsonforms.discourse.group/u/sakis_aj)\
**Post date:** [October 17, 2022, 9:00pm UTC](https://jsonforms.discourse.group/t/how-to-remove-comma-separator-from-an-integer-angular/1082/3 "2022-10-17T21:00:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sakis\_aj](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sakis_aj/32/522_2.png) [@sakis\_aj](https://jsonforms.discourse.group/u/sakis_aj)\
**Post date:** [October 18, 2022, 8:23pm UTC](https://jsonforms.discourse.group/t/how-to-remove-comma-separator-from-an-integer-angular/1082/4 "2022-10-18T20:23:42Z")

</div>

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**

```auto
<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**

```auto
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);
  }

}

```

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 19, 2022, 10:18am UTC](https://jsonforms.discourse.group/t/how-to-remove-comma-separator-from-an-integer-angular/1082/5 "2022-10-19T10:18:59Z")

</div>

Thanks for sharing! Looks good!