Fix: frontend validation of number fields fails upon save (#5646)

diff --git a/src-ui/src/app/components/common/input/number/number.component.spec.ts b/src-ui/src/app/components/common/input/number/number.component.spec.ts
index 9024614bb631a5fff8baa42330d5aa88ba43a00d..df775a5ba1d6b1b0ff55b5742b379b81304e6621 100644 (file)
--- a/src-ui/src/app/components/common/input/number/number.component.spec.ts
+++ b/src-ui/src/app/components/common/input/number/number.component.spec.ts
@@ -47,22 +47,25 @@ describe('NumberComponent', () => {
     expect(component.value).toEqual(1002)
   })
 
-  it('should support float & monetary values', () => {
-    component.writeValue(11.13)
-    expect(component.value).toEqual(11)
+  it('should support float, monetary values & scientific notation', () => {
+    const mockFn = jest.fn()
+    component.registerOnChange(mockFn)
+
+    component.step = 1
+    component.onChange(11.13)
+    expect(mockFn).toHaveBeenCalledWith(11)
+
+    component.onChange(1.23456789e8)
+    expect(mockFn).toHaveBeenCalledWith(123456789)
+
     component.step = 0.01
-    component.writeValue(11.1)
-    expect(component.value).toEqual('11.10')
-    component.step = 0.1
-    component.writeValue(12.3456)
-    expect(component.value).toEqual(12.3456)
-    // float (step = .1) doesn't force 2 decimals
-    component.writeValue(11.1)
-    expect(component.value).toEqual(11.1)
+    component.onChange(11.1)
+    expect(mockFn).toHaveBeenCalledWith('11.10')
   })
 
-  it('should support scientific notation', () => {
-    component.writeValue(1.23456789e8)
-    expect(component.value).toEqual(123456789)
+  it('should display monetary values fixed to 2 decimals', () => {
+    component.step = 0.01
+    component.writeValue(11.1)
+    expect(component.value).toEqual('11.10')
   })
 })

diff --git a/src-ui/src/app/components/common/input/number/number.component.ts b/src-ui/src/app/components/common/input/number/number.component.ts
index 6675e44981a502bb7e534fbd2c6e8f4f7674717b..abfd788afc9a3cc4ffc0fce039576806b4a37fc0 100644 (file)
--- a/src-ui/src/app/components/common/input/number/number.component.ts
+++ b/src-ui/src/app/components/common/input/number/number.component.ts
@@ -36,9 +36,18 @@ export class NumberComponent extends AbstractInputComponent<number> {
     })
   }
 
+  registerOnChange(fn: any): void {
+    this.onChange = (newValue: any) => {
+      // number validation
+      if (this.step === 1 && newValue?.toString().indexOf('e') === -1)
+        newValue = parseInt(newValue, 10)
+      if (this.step === 0.01) newValue = parseFloat(newValue).toFixed(2)
+      fn(newValue)
+    }
+  }
+
   writeValue(newValue: any): void {
-    if (this.step === 1 && newValue?.toString().indexOf('e') === -1)
-      newValue = parseInt(newValue, 10)
+    // Allow monetary values to be displayed with 2 decimals
     if (this.step === 0.01) newValue = parseFloat(newValue).toFixed(2)
     super.writeValue(newValue)
   }