Input mask with Ionic 3 app

Question

I need to use ng2-currency-mask input mask with Ionic 3 app. They have given a fix for input focus issue which is in the Ionic app. I cannot understand what I have to do here. Can you tell me how to use it?

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);
    }

Can you tell me what was this [id]="'yourInputId' + index"? How can I set that on my Ionic app?

You can read more about it here.

Update:

I have tried like this.But compile time error on template due to index. I don't have any for loops here.

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

Answer 1

Can you try this : (if your input id="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>

I think the index is an array from phones (home, mobile, work) is about you id name + index (phone). Setting the id in your context just add 'mobile' and for the index put only 0 for a try i didn't tested that modules. Regards

Answer 2

Try this 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:

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

Answer 3

Actually, I was able to make a directive and it seems to work pretty well on desktop, iOS, and android.

No hacks required.

create IonMask directive by

ionic g directive

then replace it with this:

// 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 on your component:

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

Use it like that in your component's template :

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

And in your component's controller (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