# Integer type is showing with

**URL:** <https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442>\
**Category:** General\
**Created:** [April 12, 2023, 11:33am UTC](https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442 "2023-04-12T11:33:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vijay](https://avatars.discourse-cdn.com/v4/letter/v/4bbf92/32.png) [@vijay](https://jsonforms.discourse.group/u/vijay)\
**Post date:** [April 12, 2023, 11:33am UTC](https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442/1 "2023-04-12T11:33:30Z")

</div>

Hi,  
I have a integer 52428800. But when i try to display its showing as 52.428.800.  
I dont want the dot. How to fix it. I am using angular.

---

<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:** [April 13, 2023, 7:45am UTC](https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442/2 "2023-04-13T07:45:58Z")

</div>

The off-the-shelf [Angular Material number renderer](https://github.com/eclipsesource/jsonforms/blob/229d99a9a8a79a95549b2eae2a11037a5515997f/packages/angular-material/src/controls/number.renderer.ts) has the separators hard coded. If you don’t want them you need to register a custom number renderer. For this you can simply copy the renderer and remove the separators.

---

<div class="post-metadata">

**Author:** ![vijay](https://avatars.discourse-cdn.com/v4/letter/v/4bbf92/32.png) [@vijay](https://jsonforms.discourse.group/u/vijay)\
**Post date:** [April 13, 2023, 8:37am UTC](https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442/3 "2023-04-13T08:37:18Z")

</div>

Thank you sdirix for your reply. I found the solution for this.

Now I am facing issue with default values. If I use “useDefaults: true”, I am not able to reset the text field.

After I reset again the default value is popping up. So I am not able to modify the value.  
How to solve this issue.

Thanks  
Vijay

---

<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:** [April 13, 2023, 8:46am UTC](https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442/4 "2023-04-13T08:46:16Z")

</div>

Hi @vijay,

This is just how the `defaults` work in AJV. Whenever the validation is running (with every change) the defaults will be populated if necessary.

If you only want to generate the defaults initially then I would like to recommend running a single AJV validation pass on your data before handing it over to the form which has `useDefaults` disabled.

---

<div class="post-metadata">

**Author:** ![vijay](https://avatars.discourse-cdn.com/v4/letter/v/4bbf92/32.png) [@vijay](https://jsonforms.discourse.group/u/vijay)\
**Post date:** [April 13, 2023, 9:21am UTC](https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442/5 "2023-04-13T09:21:04Z")

</div>

Hi Sdirix,

Can you please help me with some sample code to achieve this?

Thanks,  
Vijay

---

<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:** [April 18, 2023, 7:52am UTC](https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442/6 "2023-04-18T07:52:40Z")

</div>

There is nothing special to it. You can use the `createAjv` method we export from `@jsonforms/core` and hand over `useDefault: true`. Then use this instance to validate your data one time.

---

<div class="post-metadata">

**Author:** ![vijay](https://avatars.discourse-cdn.com/v4/letter/v/4bbf92/32.png) [@vijay](https://jsonforms.discourse.group/u/vijay)\
**Post date:** [April 18, 2023, 10:20am UTC](https://jsonforms.discourse.group/t/integer-type-is-showing-with/1442/7 "2023-04-18T10:20:19Z")

</div>

# JSONForms Angular Material Playground

\<jsonforms  
[data]=“data”  
[schema]=“schema”

```
[renderers]="renderers"
[ajv]="ajv"
[config] = "defaultConfigOptions"
(dataChange)="onChange($event)"
[validationMode]="getValidation()"

```

> 

\<button (click)=“save()”\>Save

import { Component, OnInit } from ‘@angular/core’;  
import { angularMaterialRenderers } from ‘@jsonforms/angular-material’;  
import { and, createAjv, isControl, optionIs, rankWith, schemaTypeIs, scopeEndsWith, Tester, formatIs } from ‘@jsonforms/core’;  
import { MultiSelectControlRenderer } from ‘./multiselect.renderer’;  
import { DataDisplayComponent } from ‘./data.control’;  
import uischemaAsset from ‘…/assets/uischema.json’;  
import schemaAsset from ‘…/assets/schema.json’;  
import dataAsset from ‘./data’;  
import { parsePhoneNumber } from ‘libphonenumber-js’;  
import { DateAdapter } from ‘@angular/material/core’;  
import { NumberControlRenderer } from ‘./number.renderer’;  
import { TableRenderer } from ‘./table.renderer’;  
import { PasswordControlRenderer } from ‘./password.renderer’;  
const intTester: Tester = and(  
schemaTypeIs(‘integer’),  
);  
const arrayTester: Tester = and(  
schemaTypeIs(‘array’)  
);  
const pwdTester: Tester = and(  
formatIs(‘password’)  
);  
@Component({  
selector: ‘app-root’,  
templateUrl: ‘./app.component.html’,  
styleUrls: [‘./app.component.css’]  
})  
export class AppComponent implements OnInit {  
validationMode = “ValidateAndShow”;  
ajv = createAjv({  
schemaId: ‘id’,  
allErrors: true,  
useDefaults: true

});  
onChange(event) {  
this.data = event;  
// console.log(event)

}  
save() {  
console.log(this.data)  
}  
defaultConfigOptions = {  
restrict: false,  
trim: false,  
showUnfocusedDescription: false,  
hideRequiredAsterisk: false

}  
renderers = [  
…angularMaterialRenderers,

```
{ tester: rankWith(5, scopeEndsWith("tls_protocols")), renderer: MultiSelectControlRenderer },

{ tester: rankWith(5, intTester), renderer: NumberControlRenderer },
{ tester: rankWith(5, arrayTester), renderer: TableRenderer },
{ tester: rankWith(2, pwdTester), renderer: PasswordControlRenderer }

```

];  
uischema = {};  
schema = {};  
data = {};  
i18n = { locale: ‘en-US’ }

constructor() {  
this.uischema = uischemaAsset;  
this.schema = schemaAsset;  
this.data = dataAsset;

```
// this.tls_protocols = this.data['tls_protocols'];
// console.log("constrictro")
// this.ajv.addFormat('time', '^([0-1][0-9]|2[0-3]):[0-5][0-9]$');
// this.ajv.addFormat('maxheap', '\A[0-9]+\Z');
// this.ajv.addFormat('integer', '\A[0-9]+\Z');
// this.dateAdapter = dateAdapter;
// dateAdapter.setLocale(this.i18n.locale);
// this.ajv.addFormat('tel', maybePhoneNumber => {
// try {
// parsePhoneNumber(maybePhoneNumber, 'DE');
// return true;
// } catch (_) {
// return false;
// }
// });

```

}

ngOnInit() {

}  
getValidation(){  
this.ajv = createAjv({  
useDefaults: false  
});  
this.validationMode = “NoValidation”  
}  
}

This is my code. I am new to Angular. Please help me where I am doing wrong