Creating a custom input mask functionality for an Ionic 3 application

Question

Creating a custom input mask functionality for an Ionic 3 application

Using ng2-currency-mask input mask in an Ionic 3 app can be a bit challenging, especially when dealing with the input focus issue. If you're having trouble understanding how to implement the fix provided by the ng2-currency-mask library, don't worry, I'm here to help!

Child Component

.html

<div>
    <input currencyMask type="tel" [(ngModel)]="value" [id]="'yourInputId' + index" 
    (focus)="scrollTo(index)" />
</div>

.ts

import { Content } from 'ionic-angular';

export class...

    @ViewChild(Content) content: Content;

    scrollTo(index) {
        let yOffset = document.getElementById('yourInputId' + index).offsetTop;
        this.content.scrollTo(0, yOffset + 20);
    }

Confused about the [id]="'yourInputId' + index" part? Let me explain how you can set that up in your Ionic app.

To learn more about it, check out this link.

Update:

I see that you've attempted to implement the solution, but encountered a compile-time error due to the use of index. Don't worry if you don't have any loops - we can figure this out together.

 <input currencyMask type="tel" [ngModel]="data?.budget" 
 [options]="{ prefix: '', thousands: ',', decimal: '' }" 
 formControlName="budget" 
 (ngModelChange)="data.budget=$event;calculateContingency()" 
 [id]="'yourInputId' + index" (focus)="scrollTo(index)"/>

My component structure:

parent.html

<ion-content class="project">
  <ion-grid>
    <ion-row class="details">
      <project [data]="data"></project>// above code is in this child componet
    </ion-row>

  </ion-grid>
</ion-content>

javascript angular typescript ionic3

Answer 1

Answer №1

Could you please attempt this code snippet: (assuming your input id is "mobile")

<ion-input currencyMask type="tel" [ngModel]="data?.budget" 
[options]="{ prefix: '', thousands: ',', decimal: '' }" 
formControlName="budget" 
ngModelChange)="data.budget=$event;calculateContingency()" 
[id]="'mobile0'" (focus)="scrollTo(0)"></ion-input>

It seems that the index refers to an array of phones (home, mobile, work) based on your ID name + index (phone). When setting the ID, simply add 'mobile' in your context and for the index, just use 0 as a starting point. I have not personally tested these modules. Best regards.

Answer 2

Could you please attempt this code snippet: (assuming your input id is "mobile")

<ion-input currencyMask type="tel" [ngModel]="data?.budget" 
[options]="{ prefix: '', thousands: ',', decimal: '' }" 
formControlName="budget" 
ngModelChange)="data.budget=$event;calculateContingency()" 
[id]="'mobile0'" (focus)="scrollTo(0)"></ion-input>

It seems that the index refers to an array of phones (home, mobile, work) based on your ID name + index (phone). When setting the ID, simply add 'mobile' in your context and for the index, just use 0 as a starting point. I have not personally tested these modules. Best regards.

Answer 3

Answer №2

Follow these steps for the correct syntax:

HTML:

     <ion-input currencyMask type="tel" [ngModel]="data?.budget" 
     [options]="{ prefix: '', thousands: ',', decimal: '' }" 
     formControlName="budget" 
     ngModelChange)="data.budget=$event;calculateContingency()" 
     id="yourInputId" (focus)="scrollTo()"></ion-input>

TypeScript:

 Ensure that you include the following function in your TypeScript file:
    
    scrollTo() {
        let yOffset = document.getElementById('yourInputId').offsetTop;
        this.content.scrollTo(0, yOffset + 20);
    }

Answer 4

Follow these steps for the correct syntax:

HTML:

     <ion-input currencyMask type="tel" [ngModel]="data?.budget" 
     [options]="{ prefix: '', thousands: ',', decimal: '' }" 
     formControlName="budget" 
     ngModelChange)="data.budget=$event;calculateContingency()" 
     id="yourInputId" (focus)="scrollTo()"></ion-input>

TypeScript:

 Ensure that you include the following function in your TypeScript file:
    
    scrollTo() {
        let yOffset = document.getElementById('yourInputId').offsetTop;
        this.content.scrollTo(0, yOffset + 20);
    }

Answer 5

Answer №3

Successfully implemented a directive that works smoothly on desktop, iOS, and android platforms without any hacks needed.

No workaround necessary.

To create the IonMask directive:

ionic g directive

Replace it with the following code snippet:

// Angular
import { Directive, Input } from '@angular/core';

// Ionic
import { IonInput } from '@ionic/angular';

// Rxjs
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

// Text-mask
import { createTextMaskInputElement } from 'text-mask-core';

/**
 * ion-mask directive, based on text-mask module
 */
@Directive({
  selector: '[ionMask]',
  providers: [IonInput],
})
export class IonMaskDirective {

  @Input('ionMask') 
  private mask            : Array<any>    = [];
  private onDestroy       : Subject<void> = new Subject<void>();

  constructor(public ionInput: IonInput) {}

  public ngOnInit() {
    this.configureInput();
  }

  public ngOnDestroy() {
    this.onDestroy.next();
  }

  public async configureInput() {
    const input       = await this.ionInput.getInputElement();
    const maskedInput = createTextMaskInputElement({
      inputElement  : input,
      mask          : this.mask,
      guide         : false
    });
    this.ionInput
      .ionChange
      .pipe( takeUntil( this.onDestroy ) )
      .subscribe( ( event: CustomEvent ) => {
        const { value } = event.detail;
        maskedInput.update(value);
        this.ionInput.value = input.value;
      });
  }

}

Import the directive in your component:

@NgModule({
  imports: [....],
  declarations: [..., IonMaskDirective , ...],
})
export class yourComponentModule { }

Use it in your component's template like this :

<ion-input formControlName="controlName" [ionMask]="mask"></ion-input>

In your component's controller for phone mask:

public mask : Array<any>  =  ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/,];

source: https://github.com/ionic-team/ionic-framework/issues/15424#issuecomment-552057007

Answer 6

Successfully implemented a directive that works smoothly on desktop, iOS, and android platforms without any hacks needed.

No workaround necessary.

To create the IonMask directive:

ionic g directive

Replace it with the following code snippet:

// Angular
import { Directive, Input } from '@angular/core';

// Ionic
import { IonInput } from '@ionic/angular';

// Rxjs
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

// Text-mask
import { createTextMaskInputElement } from 'text-mask-core';

/**
 * ion-mask directive, based on text-mask module
 */
@Directive({
  selector: '[ionMask]',
  providers: [IonInput],
})
export class IonMaskDirective {

  @Input('ionMask') 
  private mask            : Array<any>    = [];
  private onDestroy       : Subject<void> = new Subject<void>();

  constructor(public ionInput: IonInput) {}

  public ngOnInit() {
    this.configureInput();
  }

  public ngOnDestroy() {
    this.onDestroy.next();
  }

  public async configureInput() {
    const input       = await this.ionInput.getInputElement();
    const maskedInput = createTextMaskInputElement({
      inputElement  : input,
      mask          : this.mask,
      guide         : false
    });
    this.ionInput
      .ionChange
      .pipe( takeUntil( this.onDestroy ) )
      .subscribe( ( event: CustomEvent ) => {
        const { value } = event.detail;
        maskedInput.update(value);
        this.ionInput.value = input.value;
      });
  }

}

Import the directive in your component:

@NgModule({
  imports: [....],
  declarations: [..., IonMaskDirective , ...],
})
export class yourComponentModule { }

Use it in your component's template like this :

<ion-input formControlName="controlName" [ionMask]="mask"></ion-input>

In your component's controller for phone mask:

public mask : Array<any>  =  ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/,];

source: https://github.com/ionic-team/ionic-framework/issues/15424#issuecomment-552057007

Creating a custom input mask functionality for an Ionic 3 application

Answer №1

Answer №2

Answer №3

No workaround necessary.

Similar questions

Express Session Issue Preventing Ajax Call from Functioning

Conditionally typing in TypeScript to check if a string contains a specific value

FullPage.js combines traditional scrolling with a unique horizontal slider feature

Exploring JSON data to extract values

Add the div element to a different div in the HTML code

developing various instances of an object's characteristic

retrieve: add elements to an array

"The function within the Sails.js model is not properly returning a value when rendered

Error: Access Denied - discord.js bot command cannot be executed due to lack of authorization

Obtaining the component instance ('this') from a template

Is it possible to dynamically close the parent modal based on input from the child component?

ngIf only functions correctly when the page is reloaded

Using html data attributes to encode JSON data with strings

To launch the Angular Project utilizing Bazel, you will require sudo privileges

In a Vue serverless web application, OpenLayers Map object fails to trigger events

Tips for adjusting the material ui Popper width to fit the container without disabling the portal

Tips for implementing validations on a table that changes dynamically

All things considered, let's delve into the topic

Guide to utilizing constructor options with a TypeScript Vue class

Error encountered when pushing Angular data to Django for user login form: 'Unexpected token < in JSON at position 2' while attempting to parse the JSON