fix: #922 Scientific notation format

JsDaddy · Aug 9, 2021 · 81d278d · 81d278d
1 parent d5506b0
commit 81d278d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/projects/ngx-mask-lib/src/lib/mask.directive.ts b/projects/ngx-mask-lib/src/lib/mask.directive.ts
@@ -447,7 +447,7 @@ export class MaskDirective implements ControlValueAccessor, OnChanges, Validator
     }
 
     if (typeof inputValue === 'number') {
-      inputValue = String(inputValue);
+      inputValue = this._maskService.numberToString(inputValue);
       inputValue = this.decimalMarker !== '.' ? inputValue.replace('.', this.decimalMarker) : inputValue;
       this._maskService.isNumberValue = true;
     }

diff --git a/projects/ngx-mask-lib/src/lib/mask.service.ts b/projects/ngx-mask-lib/src/lib/mask.service.ts
@@ -243,6 +243,18 @@ export class MaskService extends MaskApplierService {
     );
   }
 
+  /**
+   * Convert number value to string
+   * 3.1415 -> '3.1415'
+   * 1e-7 -> '0.0000001'
+   */
+  public numberToString(value: number | string): string {
+    if (!value && value !== 0) {
+      return String(value);
+    }
+    return Number(value).toLocaleString('fullwide', { useGrouping: false, maximumFractionDigits: 20 })
+  }
+
   private _checkForIp(inputVal: string): string {
     if (inputVal === '#') {
       return `${this.placeHolderCharacter}.${this.placeHolderCharacter}.${this.placeHolderCharacter}.${this.placeHolderCharacter}`;

diff --git a/src/app/bugs/bugs.component.html b/src/app/bugs/bugs.component.html
@@ -164,6 +164,31 @@
     </div>
   </div>
 
+  <div class="container box">
+    <div class="row">
+      <div class="col-12">
+        <label for="ScientificNotation">Correctly display numbers in scientific notation, e.g. 5e-7</label>
+        <div>
+          <p>
+            <input
+              type="text"
+              mask="separator.7"
+              thousandSeparator=" "
+              decimalMarker=","
+              formControlName="ScientificNotation"
+              id="ScientificNotation"
+            />
+          </p>
+          <p>
+            Valid: {{ bugsForm.controls.ScientificNotation.valid }}<br />
+            Value: {{ bugsForm.controls.ScientificNotation.value }}<br />
+            Errors: {{ bugsForm.controls.ScientificNotation.errors | json }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="container box">
     <div class="row">
       <div class="col-12">

diff --git a/src/app/bugs/bugs.component.ts b/src/app/bugs/bugs.component.ts
@@ -21,6 +21,7 @@ export class BugsComponent implements OnInit, OnDestroy {
       DecMarkerDot: [],
       CorrectRemovingSpace: [1200300.99],
       SecureInput: [987654321],
+      ScientificNotation: [0.0000005],
     });
   }