Fixed issue #42 #43

Author: asoftwareworld

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@asoftwareworld/form-builder",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "author": "Anish Sharma",
     "license": "MIT",
     "scripts": {

src/components/form-control/calculation/calculation-dialog.html

@@ -100,6 +100,7 @@ <h4 mat-dialog-title>Edit Property</h4>
                         <mat-form-field appearance="outline" class="asw-mat-form-field">
                             <mat-label>Operator {{index+1}}</mat-label>
                             <mat-select formControlName="label"
+                                (selectionChange)="onOperatorChange($event, op)"
                                 matTooltip="Select operator {{index+1}}" required>
                                 <mat-option *ngFor="let control of data.numberControls" [value]="control.label">
                                     {{control.label}}

src/components/form-control/calculation/calculation-dialog.ts

@@ -104,4 +104,13 @@ export class AswCalculationDialog implements OnInit {
             operation.controls.label.setValidators(Validators.required);
         }
     }
+
+    onOperatorChange(event: MatSelectChange, operator: any): void {
+        this.data.numberControls.forEach((operation: any) => {
+            if (event.value === operation.label) {
+                operator.value.id = operation.guid;
+                operator.value.control = operation;
+            }
+        });
+    }
 }

src/components/form-control/number/number-dialog.html

@@ -64,7 +64,7 @@ <h4 mat-dialog-title>Edit Property</h4>
                         <input matInput type="text" aswNumbersOnly
                                         name="value"
                                         placeholder="Enter value"
-                                        (keypress)="objectUtils.keyPressNumbersWithDecimal($event)"
+                                        [decimals]="decimals"
                                         matTooltip="Enter value"
                                         formControlName="value">                        
                     </mat-form-field>

src/components/form-control/number/number-dialog.ts

@@ -17,6 +17,7 @@ import { NumberControl } from './number-control';
     templateUrl: './number-dialog.html'
 })
 export class AswNumberDialog implements OnInit {
+    decimals = 100;
     constants: any = Constants;
     aswEditNumberForm!: FormGroup;
     status!: boolean;

src/components/form-control/number/number.html

@@ -7,7 +7,7 @@
                         [(ngModel)]="control.value"
                         #input="ngModel"
                         (ngModelChange)="onChange(control)"
-                        (keypress)="objectUtils.keyPressNumbersWithDecimal($event)"
+                        [decimals]="decimals"
                         [matTooltip]="control.tooltip"
                         [maxlength]="control.maxlength"
                         [minlength]="control.minlength"

src/components/form-control/number/number.ts

@@ -21,6 +21,7 @@ export class AswNumber implements OnInit, AfterViewInit {
 
     constants: any = Constants;
     objectUtils = ObjectUtils;
+    decimals = 100;
     /**
      * Number control
      */

src/components/form-control/number/numbers-only.directive.ts

@@ -6,20 +6,74 @@
  * found in the LICENSE file
  */
 
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-    selector: 'input[aswNumbersOnly]'
+    selector: '[aswNumbersOnly]'
 })
 export class AswNumberDirective {
+    // tslint:disable-next-line:no-input-rename
+    @Input('decimals') decimals = 0;
+    // tslint:disable-next-line:no-input-rename
+    @Input('negative') negative = 0;
 
-    constructor(public element: ElementRef) { }
+    private checkAllowNegative(value: string): any {
+        if (this.decimals <= 0) {
+            return String(value).match(new RegExp(/^-?\d+$/));
+        } else {
+            const regExpString =
+                '^-?\\s*((\\d+(\\.\\d{0,' +
+                this.decimals +
+                '})?)|((\\d*(\\.\\d{1,' +
+                this.decimals +
+                '}))))\\s*$';
+            return String(value).match(new RegExp(regExpString));
+        }
+    }
 
-    @HostListener('input', ['$event']) onInputChange(event: any): void {
-        const initalValue = this.element.nativeElement.value;
-        this.element.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
-        if (initalValue !== this.element.nativeElement.value) {
-            event.stopPropagation();
+    private check(value: string): any {
+        if (this.decimals <= 0) {
+            return String(value).match(new RegExp(/^\d+$/));
+        } else {
+            const regExpString =
+                '^\\s*((\\d+(\\.\\d{0,' +
+                this.decimals +
+                '})?)|((\\d*(\\.\\d{1,' +
+                this.decimals +
+                '}))))\\s*$';
+            return String(value).match(new RegExp(regExpString));
         }
     }
+
+    private run(oldValue: any): void {
+        setTimeout(() => {
+            const currentValue: string = this.el.nativeElement.value;
+            const allowNegative = this.negative > 0 ? true : false;
+
+            if (allowNegative) {
+                if (
+                    !['', '-'].includes(currentValue) &&
+                    !this.checkAllowNegative(currentValue)
+                ) {
+                    this.el.nativeElement.value = oldValue;
+                }
+            } else {
+                if (currentValue !== '' && !this.check(currentValue)) {
+                    this.el.nativeElement.value = oldValue;
+                }
+            }
+        });
+    }
+
+    constructor(private el: ElementRef) { }
+
+    @HostListener('keydown', ['$event'])
+    onKeyDown(event: KeyboardEvent): void {
+        this.run(this.el.nativeElement.value);
+    }
+
+    @HostListener('paste', ['$event'])
+    onPaste(event: ClipboardEvent): void {
+        this.run(this.el.nativeElement.value);
+    }
 }

src/components/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@asoftwareworld/form-builder",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "author": "Anish Sharma",
     "license": "MIT",
     "peerDependencies": {