Introduce 'useGrouping' option

Introduce 'useGrouping' option for Angular's NumberControlRenderer to disable grouping.

Author: eneufeld

packages/angular-material/src/controls/number.renderer.ts

@@ -30,8 +30,10 @@ import {
  isNumberControl,
  or,
  RankedTester,
- rankWith
+ rankWith,
+ StatePropsOfControl
 } from '@jsonforms/core';
+import merge from 'lodash/merge';
 
 @Component({
  selector: 'NumberControlRenderer',
@@ -123,18 +125,20 @@ export class NumberControlRenderer extends JsonFormsControl {
  return '';
  };
 
- mapAdditionalProps() {
+ mapAdditionalProps(props:StatePropsOfControl) {
  if (this.scopedSchema) {
  const defaultStep = isNumberControl(this.uischema, this.rootSchema)
  ? 0.1
  : 1;
  this.min = this.scopedSchema.minimum;
  this.max = this.scopedSchema.maximum;
  this.multipleOf = this.scopedSchema.multipleOf || defaultStep;
+ const appliedUiSchemaOptions = merge({}, props.config, this.uischema.options);
  const currentLocale = getLocale(this.jsonFormsService.getState());
  if (this.locale === undefined || this.locale !== currentLocale) {
  this.locale = currentLocale;
  this.numberFormat = new Intl.NumberFormat(this.locale, {
+ useGrouping: appliedUiSchemaOptions.useGrouping,
  maximumFractionDigits: this.MAXIMUM_FRACTIONAL_DIGITS
  });
  this.determineDecimalSeparator();

packages/angular-material/test/number-control.spec.ts

@@ -23,20 +23,25 @@
  THE SOFTWARE.
 */
 import { DebugElement } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatError, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import {
+ baseSetup,
  ErrorTestExpectation,
+ getJsonFormsService,
  numberAdditionalPropsTest,
  numberBaseTest,
  numberErrorTest,
- numberInputEventTest
+ numberInputEventTest,
+ prepareComponent
 } from '@jsonforms/angular-test';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { Actions, ControlElement, JsonFormsCore } from '@jsonforms/core';
 import { NumberControlRenderer, NumberControlRendererTester } from '../src';
-import { JsonFormsAngularService } from '@jsonforms/angular';
 
 describe('Material number field tester', () => {
  const uischema = {
@@ -100,3 +105,110 @@ describe(
  'Number control Additional Props Tests',
  numberAdditionalPropsTest(testConfig, 'input', toSelect)
 );
+
+describe(
+ 'Number control custom', () => {
+ let fixture: ComponentFixture<any>;
+ let numberNativeElement: any;
+ let component: JsonFormsControl;
+ baseSetup(testConfig);
+
+ const defaultSchema = {
+ type: 'object',
+ properties: {
+ foo: { type: 'number' }
+ }
+ };
+ const defaultData = {foo:1000000};
+ const defaultUischema: ControlElement = {
+ type: 'Control',
+ scope: '#/properties/foo'
+ };
+
+ beforeEach(() => {
+ const preparedComponents = prepareComponent(
+ testConfig, 'input', toSelect);
+ fixture = preparedComponents.fixture;
+ numberNativeElement = preparedComponents.numberNativeElement;
+ component = preparedComponents.component;
+ });
+
+ it('default grouping behavior', () => {
+ const uischema = Object.assign({},defaultUischema);
+ component.uischema = uischema;
+ const state:JsonFormsCore = {
+ data: defaultData,
+ schema: defaultSchema,
+ uischema: uischema
+ };
+ getJsonFormsService(component).init({
+ core: state, i18n: {
+ locale: 'en',
+ localizedSchemas: undefined,
+ localizedUISchemas: undefined
+ }
+ });
+ getJsonFormsService(component).updateCore(
+ Actions.init(state.data, state.schema)
+ );
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(numberNativeElement.value).toBe('1,000,000');
+ });
+
+ it('should use config for grouping', () => {
+ const uischema = Object.assign({},defaultUischema);
+ component.uischema = uischema;
+ const state:JsonFormsCore = {
+ data: defaultData,
+ schema: defaultSchema,
+ uischema: uischema
+ };
+ getJsonFormsService(component).init({
+ core: state, i18n: {
+ locale: 'en',
+ localizedSchemas: undefined,
+ localizedUISchemas: undefined
+ },config: {
+ useGrouping: false
+ },
+ });
+ getJsonFormsService(component).updateCore(
+ Actions.init(state.data, state.schema)
+ );
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(numberNativeElement.value).toBe('1000000');
+ });
+ it('should use uischema for grouping', () => {
+ const uischema = Object.assign({},defaultUischema);
+ uischema.options = {
+ useGrouping: false
+ }
+ component.uischema = uischema;
+ const state:JsonFormsCore = {
+ data: defaultData,
+ schema: defaultSchema,
+ uischema: uischema
+ };
+ getJsonFormsService(component).init({
+ core: state, i18n: {
+ locale: 'en',
+ localizedSchemas: undefined,
+ localizedUISchemas: undefined
+ },config: {
+ useGrouping: true
+ },
+ });
+ getJsonFormsService(component).updateCore(
+ Actions.init(state.data, state.schema)
+ );
+ component.ngOnInit();
+ fixture.detectChanges();
+
+ expect(numberNativeElement.value).toBe('1000000');
+ });
+ }
+);

packages/angular-test/src/number.ts

@@ -43,7 +43,7 @@ interface ComponentResult<C extends JsonFormsControl> {
  numberNativeElement?: any;
 }
 
-const prepareComponent = <C extends JsonFormsControl>(
+export const prepareComponent = <C extends JsonFormsControl>(
  testConfig: TestConfig<C>,
  instance?: string,
  elementToUse?: (element: DebugElement) => any