Integer type is showing with

General
1

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.

2

The off-the-shelf Angular Material number renderer 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.

3

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

4

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.

5

Hi Sdirix,

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

Thanks,
Vijay

6

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.

7

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