alexminiapps / angular-code-input Goto Github PK
View Code? Open in Web Editor NEWCode (number/chars/otp/password) input component for angular 7, 8, 9, 10, 11, 12+ projects including Ionic 4, 5 +
License: MIT License
Code (number/chars/otp/password) input component for angular 7, 8, 9, 10, 11, 12+ projects including Ionic 4, 5 +
License: MIT License
I'm unable to style the input (specifically color
and font-weight
).
As can be seen on the images below. I do correctly set the --color
and --item-font-weight
variables, yet these are not applied to the actual input styles. I apply other styles too ie. --item-background
and this one works, so I believe it is not an issue with my implemenation.
I worked my way around it using ::ng-deep
, however it is not the desired solution as it is deprecated.
'autofocus' is not a property of the component
using ionic 5 / angular 10 btw
I can't seem to get the autocapitalize attribute to function as the documentation suggests. Perhaps the latest code isn't published to NPM yet?
Current behaviour:
If the code is with isNonDigitsCode flag true you can reset the code with empty string.
this.code = '';
But ff the code is with isNonDigitsCode flag is false you cant reset the code to undefined value. Only to 0000 value.
Wanted behaviour. To be able to reset numeric code with undefined like this:
this.code = undefined;
If you assigned value for the first time it works.
But the second time its not.
this.code = '1111'; // works
... some code ...
this.code = '2222' // doesn't work
I found a workaround, but still i think its need a fix.
this.code = '1111'; // works
... some code ...
this.code = '2222'
setTimeout(() => this.code = '2222' // works
But this workaround only works if the previous value of code wasn't empty string.
this.code = '1111'; // works
... some code ...
this.code = ''
setTimeout(() => this.code = '2222' // doesn't works
But if we assigned undefined it works
this.code = '1111'; // works
... some code ...
this.code = undefined
setTimeout(() => this.code = '2222' // works
I have a problem with version 1.5.0
It doesn't work on the Iphone, I'm using IOS version 15.0 on an Iphone 12, I used the attribute [code]="123456" and the auto-complete suggestion doesn't appear on the keyboard, could you help me?
My code:
<code-input #codeInput [initialFocusField]="0" [codeLength]="6" (codeChanged)="onCodeChanged($event)" (codeCompleted)="onCodeCompleted($event)"> </code-input>
In iOS pages are jump if MPIN change from one input to other.
Hi,
I've got an error with read-only
properties on angular 11:
error TS2540: Cannot assign to 'isCodeHidden' because it is a read-only property. <code-input [isCodeHidden]="false"...
Could you pls check this?
Thanks so much!
Hello! �We used your plugin. But there have been problems in recent days.
The input focus always appears in the first input box.
we use ionic + angulr 8 + cordova..
What is causing this. Can you help us. Thank you very much!
Please see attachment
11.mp4.zip
It would be nice to have an option to auto capitalize inputs as they get typed in. The autocapitalize
attribute has been added, but this is only used for virtual keyboards and has limited browser support. A better way would be to handle this inside the component, observing inputs and capitalizing them as they come in.
Hi,
We currently use your module in our project. The code-input component is called multiple times in different pages/components. We use the same configuration for almost every code-input.
I was wondering if you can look to define a global configuration at the module level. This configuration will be the default for the entire project.
For example, in Ionic, they use the forRoot method to define options (https://ionicframework.com/docs/angular/config).
Thanks !
Kr.
Is it possible to write a value into the component? For example I combined it with biometric login, so when the fingerprint is recognised I want to fill in the stored value.
And another small question, is it possible to make the delay smaller on mobile devices, of converting a visible number to hidden value.
If you pass the default code, for example 1234, there is an error in the console.
Although the input continues to work.
<code-input [codeLength]="4"
[code]="1234"
[isFocusingOnLastByClickIfFilled]="true"
(codeChanged)="onCodeChanged($event)"
(codeCompleted)="onCodeCompleted($event)"
core.js:5973 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'empty': 'true'. Current value: 'false'.
at throwErrorIfNoChangesMode (core.js:6506)
at bindingUpdated (core.js:12593)
at checkStylingProperty (core.js:16424)
at Module.ɵɵclassProp (core.js:16332)
at CodeInputComponent_span_0_Template (angular-code-input.js:25)
at executeTemplate (core.js:9269)
at refreshView (core.js:9138)
at refreshEmbeddedViews (core.js:10245)
at refreshView (core.js:9162)
at refreshComponent (core.js:10291)
When every inputs are empty, do select per default the first one, even if the one selected isn't the first one.
After analyzing the UX of such input fields, user aren't use to select the first one, but always click somewhere in the center and start to write.
For us, this will sort of always start with the first having to be selected before moving one to the next one.
I would add a new input field autoSelectFirstInput = true
(default being true). SO if someone which they can deactivate this feature.
Default true : Because this is what make the more sense.
Then, on click -> if every inputs are empty -> select first one.
autoSelectFirstInput
could be chance to autoSelectedInputIndex = 0
. This would let the user select which one to autoselect. But I cannot see any use case for this.
Use NG_VALUE_ACCESSOR, so that the component can use ngModel, formControlName, etc.
Number keyboard only, where as isCharCode property is enable
Hello,
I'm currently facing an issue with angular-code-input on iOS 15.6.1 and ionic 6.
When i try to enter a number, i've to press my keyboard key twice to switch to the other input.
HTML:
<code-input
#codeInput
class="gray"
[codeLength]="6"
[initialFocusField]="6"></code-input>
CSS:
code-input {
--item-height: 46px !important;
--item-spacing: 0 !important;
--item-border: unset !important;
--item-border-bottom: unset !important;
--item-border-focused: unset !important;
--item-border-bottom-focused: unset !important;
--item-border-has-value: unset !important;
--item-border-bottom-has-value: unset !important;
--item-shadow-focused: unset !important;
--item-border-radius: 8px !important;
--item-background: var(--ion-color-gray-contrast) !important;
--color: var(--ion-color-gray-shade) !important;
font-size: 24px !important;
line-height: 30px !important;
font-weight: 600 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
overflow: visible;
&.gray {
--item-background: var(--ion-color-light-tint) !important;
span {
&.empty {
&::after {
background: var(--ion-color-light-shade);
}
}
input {
text-transform: uppercase !important;
}
}
}
&.has-error {
--item-background: var(--ion-color-danger-tint) !important;
span {
border: 1px solid var(--ion-color-danger);
border-radius: 8px;
&.empty::after {
background: var(--ion-color-danger);
}
}
}
span {
width: 48px;
height: 48px;
margin-right: 4px;
position: relative;
z-index: 5;
border: 1px solid transparent;
&:last-child {
margin-right: 0;
}
&.empty {
display: flex !important;
justify-content: center;
&::after {
content: "";
position: absolute;
bottom: 8px;
width: 24px;
height: 2px;
background: var(--ion-color-separator);
margin: 0 auto;
z-index: 10;
}
}
input {
text-transform: uppercase !important;
}
}
}
Video
Package.json:
"@angular/common": "~13.2.2",
"@angular/core": "~13.2.2",
"@angular/forms": "~13.2.2",
"@capacitor/android": "^3.7.0",
"@capacitor/ios": "^3.7.0",
"@ionic/angular": "^6.2.3",
"angular-code-input": "^1.6.0",
I don't really understand what's wrong cause it's working on ionic 6 + android and on my web app on chrome, firefox, safari, etc.
Can you please help me figured out what's going on ?
Hi, in the application that we currently use this library in, we use it to input codes with the regex pattern of /^[0-9a-zA-Z]{6}$
, however, this library only allows enforcing of /^[0-9]+$/
, otherwise all characters are allowed.
Would it be possible, or desirable, to allow the user to set their own regexp pattern? I could work on this as a pull request if needed.
Code example as to how I imagine this could look in use:
<code-input pattern="[0-9a-zA-Z]" ...></code-input>
Is there a good way to programmatically add and "complete" a code? I am getting the code from a url param and setting it via the [code]
input, but it doesn't fire the (codeCompleted)
event even though the length is correct. Is there some other way to trigger that event?
Hello, is it possible to add an function so you can focus on the elements?
So what I want is if the element appears, the keyboard should show and the user can enter his pincode.
Would be nice to have it support angular 13.
cheers
Hi there,
Thanks for creating this package in the first place.
Is there a plan to have the font-size as an input, or keep the font-size only on the parent component?
Thanks: Pttypang
I want to use this component for my Ionic Angular app but when I installed it, imported it to app, it is not showing.
As I check, there is only code-input component(no children elements) and it's size is 0.
There are some info for packages used for my project.
"@angular/common": "~11.2.0",
"@angular/core": "~11.2.0",
"@angular/forms": "~11.2.0",
"@angular/platform-browser": "~11.2.0",
"@angular/platform-browser-dynamic": "~11.2.0",
"@angular/router": "~11.2.0",
"@ionic/angular": "^5.5.2",
"angular-code-input": "^1.4.0",
"tslib": "^2.0.0",
Could you help me?
When the code is entered normally it only fires the event once however if a code is entered quickly then it fires the event twice.
Library version: 1.5.0
Firefox: 93.0 (64 bits)
Example code:
<code-input [isCodeHidden]="true">
Numbers are showin instead of asteriks/dots. Works on chrome and edge, not on firefox.
I just installed the componet but it gave me this error
This likely means that the library (angular-code-input) which declares CodeInputModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Currently, if somebody copied a code and has accidental whitespace, nothing will be copied when the input is a digit-only input.
I would suggest that on paste, depending if the input is digit-only, whitespace in front and after will be trimmed.
Example:
Clipboard value is " 123 ", before trying to paste the text into the input field trim the data to be "123" and then try, if it is allowed.
If the input value is deleted it jumps to previous value and overrides it when the value is entered
When set to autofocus, the first box is highlighted but the keyboard won't open automatically. Tested with ionic5 on iOS with safari using the following code:
<code-input
[codeLength]="6"
(codeCompleted)="onOtpChange($event)"
initialFocusField="0"
#codeInput>
</code-input>
I'd like to translate codes to upper case as the user enters them in and have that reflected in the input. Is there any way to do that?
Is there a way to style input text, like changing the size?
Hi,
great app, love using it!
I'm wondering if it's possible to remain focused on the input after putting in the last number/character. The use case I have is that I'm wrapping the control inside a form and using (ngSubmit)
to trigger a button's submit
action, essentially enabling the users to utilize their enter buttons.
However, that only works if the input remains focused.
Is there a property I'm missing here? Or do I need a custom solution?
Edit:
The solution I'm currently using is to listen to the complete
event and then programmatically focus the code input field thus enabling ngSubmit
. I reckon that's probably the way to go.
Hi @AlexMiniApps, thanks for the component, it's lightweight and easy to use. In my app, there is a "Clear" button for users to easily clear the numbers and re-input again. Would you mind exposing this event?
Hi,
I'm on version 1.4.0 of the plugin and I'm not seeing "from messages" after tapping on any field. Safari version 14.5.1.
On a regular input field on a different page "from messages" works fine.
<code-input #codeInput [isCodeHidden]="false" [codeLength]="6" (codeCompleted)="onCodeCompleted($event)" [initialFocusField]="0" > </code-input>
Thank you!
backspace is working fine.but delete button is not triggering the value.
how can i set the attachControl of the screen keyboard to the controle of the input code
Hi, I any plans to implement disabled feature?
<code-input disabled="true">
This would add disabled="true" to inputs and some css classes for styling.
Platform: Ionic 4
When sending SMS codes for OTP on IOS the SMS Code can be pasted directly from the keyboard.
When clicking on the code on the keyboard only the first number is entered.
A normal paste from the clipboard is working
I have a use-case when i have to change the code length depending of the country i seleced. I used [codeLength]="number_length" where i change the number_length in a function . It works only once
Hi,
I just discover your project and it's working fine.
However, the behavior when deleting character can be confusing for the user : [ie: 4 digit] he can have first digit deleted but the others filled.
This case make more sense in the case of small hidden password, retyping all is much easier.
An idea will be to automatically focus the last character when user clicks on a box ; like it was a unique box.
Thanks
Hi again... I have an issue ... I can't make the keyboard go directly to lowercase. My code is only with numbers and lowercase characters.
I tried autocapitalize=off but it's not working
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.