Issue with REGEXP_ONLY_DIGITS Flag in @ngxpert/input-otp #3
              
  
  Closed
              
          
                  
                    
                      germanho1102
                    
                  
                
                  started this conversation in
                General
              
            Replies: 1 comment
-
| Created issue #4 | 
Beta Was this translation helpful? Give feedback.
                  
                    0 replies
                  
                
            
  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment
  
        
    
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
During implementation, I encountered an issue with the REGEXP_ONLY_DIGITS flag, which I intended to use to restrict input to digits only. However, it appears that this flag is not working as expected, as non-digit inputs (e.g. alphabets, punctuation) are still being accepted. I was able to replicate this issue in the demo as well.
html.file
`<form
[class]="cn('mx-auto flex max-w-[980px] justify-center pt-6 pb-4', className)"
(ngSubmit)="onSubmit()"
<input-otp
#otp="inputOtp"
[maxLength]="6"
[pattern]="REGEXP_ONLY_DIGITS"
[(ngModel)]="otpValue"
(complete)="onComplete($event)"
containerClass="group flex items-center has-[:disabled]:opacity-30"
aria-label="showcase-otp-input"
name="otp"
[disabled]="disabled()"
ts file
`export class OtpComponent {
otpValue = '6';
REGEXP_ONLY_DIGITS = REGEXP_ONLY_DIGITS;
cn = cn;
@input() className = '';
otp = viewChild(InputOTPComponent);
disabled = signal(false);
t1: ReturnType | undefined;
t2: ReturnType | undefined;
onComplete(value: string) {
console.log('OTP completed:', value);
}
ngOnDestroy() {
clearTimeout(this.t1);
clearTimeout(this.t2);
}
}
`
Beta Was this translation helpful? Give feedback.
All reactions