#34 support for a negative values - make sure that new feature will n…

…ot break existing applications
changhuixu · Jun 21, 2021 · c82d876 · c82d876
1 parent 32fd80c
commit c82d876
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/cypress/integration/clipboard-events.spec.ts b/cypress/integration/clipboard-events.spec.ts
@@ -274,18 +274,18 @@ describe('Copy & Paste', () => {
       cancelable: true,
     });
 
-    cy.get('#digit-only').clear();
+    cy.get('#negative-digit-only').clear();
 
-    cy.get('#digit-only').then(($el) => {
+    cy.get('#negative-digit-only').then(($el) => {
       $el[0].dispatchEvent(pasteEvent);
-      cy.get('#digit-only').should('have.value', '-123');
+      cy.get('#negative-digit-only').should('have.value', '-123');
     });
 
-    cy.get('#digit-only').then(($el) => {
+    cy.get('#negative-digit-only').then(($el) => {
       $el[0].dispatchEvent(pasteEvent);
-      cy.get('#digit-only').should('have.value', '-123123');
+      cy.get('#negative-digit-only').should('have.value', '-123123');
     });
 
-    cy.get('#digit-only').clear();
+    cy.get('#negative-digit-only').clear();
   });
 });
diff --git a/projects/uiowa/digit-only/src/lib/digit-only.directive.ts b/projects/uiowa/digit-only/src/lib/digit-only.directive.ts
@@ -30,6 +30,7 @@ export class DigitOnlyDirective implements OnChanges {
 
   @Input() decimal = false;
   @Input() decimalSeparator = '.';
+  @Input() allowNegatives= false;
   @Input() negativeSign = '-';
   @Input() min = -Infinity;
   @Input() max = Infinity;
@@ -61,7 +62,7 @@ export class DigitOnlyDirective implements OnChanges {
   onBeforeInput(e: InputEvent): any {
     if (isNaN(Number(e.data))) {
       if (e.data === this.decimalSeparator
-          || e.data === this.negativeSign) {
+          || (e.data === this.negativeSign && this.allowNegatives)) {
         return; // go on
       }
       e.preventDefault();
@@ -100,7 +101,7 @@ export class DigitOnlyDirective implements OnChanges {
       }
     }
 
-    if (e.key === this.negativeSign && this.min < 0) {
+    if (e.key === this.negativeSign && this.allowNegatives) {
       newValue = this.forecastValue(e.key);
       if (newValue.charAt(0) !== this.negativeSign || newValue.split(this.negativeSign).length > 2) {
         e.preventDefault();
@@ -244,7 +245,7 @@ export class DigitOnlyDirective implements OnChanges {
   }
 
   private getNegativeSignRegExp() : string {
-    return !this.hasNegativeSign || this.getSelection().includes(this.negativeSign) ? `(?!^${this.negativeSign})` : '';
+    return this.allowNegatives && (!this.hasNegativeSign || this.getSelection().includes(this.negativeSign)) ? `(?!^${this.negativeSign})` : '';
   }
 
   private isValidDecimal(string: string): boolean {

diff --git a/src/app/digit-only-demos/digit-only-demos.component.html b/src/app/digit-only-demos/digit-only-demos.component.html
@@ -16,6 +16,9 @@ <h3><code>digitOnly</code> directive</h3>
       placeholder="000"
       maxlength="3"
     />
+
+    <label for="negative-digit-only">Digit Only input box that can be negative</label>
+    <input id="negative-digit-only" type="text" digitOnly [allowNegatives]="true" placeholder="-123"/>
   </section>
 
   <section>