alexminiapps / angular-code-input Goto Github PK

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>

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?

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!

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

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 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?

'autofocus' is not a property of the component
using ionic 5 / angular 10 btw

backspace is working fine.but delete button is not triggering the value.

Hi there,

I use the code-input field inside our application and it's great.

There's only a little issue when I pass 0 as initialFocusField. Then the focus is not working.

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.

Correctly set variables.

Not applied to the input.

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.

Is there a way to style input text, like changing the size?

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

If you have time could you add this functionality?
I would, but i am short in time to understand the code.

On real device(Ionic app), if the cursor is before character the input field is not deleted.
In browser it's working fine.

Use NG_VALUE_ACCESSOR, so that the component can use ngModel, formControlName, etc.

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

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.

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.

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;

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

If the input value is deleted it jumps to previous value and overrides it when the value is entered

In iOS pages are jump if MPIN change from one input to other.

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, 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>

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.

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>

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?

Is it possible to achieve something like this on mobile screens?

Would be nice to have it support angular 13.

cheers

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?

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

Number keyboard only, where as isCharCode property is enable

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.

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.

Please add --item-background-focused css var.
So making component which designed like this will be convenient.

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 ?

Description

When every inputs are empty, do select per default the first one, even if the one selected isn't the first one.

Use case

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.

Idea

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.

Extended

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.

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)

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.

This is a Feature Request.
It would be nice for better UX to add space between some numbers.

[class.mr-4]="i == 2 "

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!

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

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.

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.

In order to be able to change styles in case of an error, it would be convenient to have a variable to handle this state such as

Hi there,

Thanks a lot for such a nice and needed lib! I'm trying to test your lib in a angular 13 project, I followed the readme instructions I got this message when import in the module:

Do you know if this lib is compatible with Ivy as the error indicates?

Cheers

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

how can i set the attachControl of the screen keyboard to the controle of the input code