#130

Author: jitender

projects/ng-otp-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-otp-input",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "A fully customizable, one-time password input component for the web built with Angular.",
   "author": {"name": "jitender"},
   "homepage": "https://github.com/code-farmz/ng-otp-input#readme",

projects/ng-otp-input/src/lib/components/ng-otp-input/ng-otp-input.component.spec.ts

@@ -90,10 +90,8 @@ export class NgOtpInputComponent implements OnInit, AfterViewInit,OnDestroy,Cont
     }
   }
   writeValue(value: string): void {
-    this.currentVal = value || null;
-    if (this.otpForm && this.currentVal) {
-      this.setValue(this.currentVal);
-    }
+    this.currentVal = !this.hasVal(value) ? null : value;
+    this.setValue(this.currentVal);
   }
 
   registerOnChange(fn: any): void {
@@ -164,8 +162,11 @@ export class NgOtpInputComponent implements OnInit, AfterViewInit,OnDestroy,Cont
     }
 
   }
+  hasVal(val){
+    return val != null && val != undefined && (!val?.trim || val.trim() != '');
+  }
   onInput($event,inputIdx){
-    let newVal=this.currentVal ? `${this.currentVal}${$event.target.value}` : $event.target.value;
+    let newVal=this.hasVal(this.currentVal) ? `${this.currentVal}${$event.target.value}` : $event.target.value;
     if(this.config.allowNumbersOnly && !this.validateNumber(newVal)){
       $event.target.value=null;
       $event.stopPropagation();
@@ -257,8 +258,8 @@ export class NgOtpInputComponent implements OnInit, AfterViewInit,OnDestroy,Cont
     if (this.config.allowNumbersOnly && isNaN(value)) {
         return;
     }
-    this.otpForm.reset();
-     if (!value) {
+    this.otpForm?.reset();
+     if (!this.hasVal(value)) {
        this.rebuildValue();
        return;
      }

projects/ng-otp-input/src/lib/components/ng-otp-input/ng-otp-input.component.ts

@@ -32,7 +32,6 @@ export class AppComponent {
 
   }
   onOtpChange(otp) {
-    console.log(otp);
     this.otp = otp;
   }