Question

我需要在Ionic 3应用中使用ng2-currency-mask输入掩码。他们已经解决了Ionic应用程序中的输入焦点问题。我无法理解我必须在这做什么。你能告诉我如何使用它吗？

子组件

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

你能告诉我这是[id]="'yourInputId' + index"的内容吗？如何在我的Ionic应用程序上设置它？

您可以阅读有关it here的更多信息。

更新

我试过这样。但由于index，模板上的编译时错误。我在这里没有for loops。

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

我的组件结构：

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

你能试试这个:(如果你的输入id =＆＃34;移动＆＃34;）

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

我认为索引是来自手机（家庭，手机，工作）的数组，是关于你的id名称+索引（手机）。在您的上下文中设置ID只需添加＆＃39; mobile＆＃39;并且对于索引只放置0试一试我没有测试那些模块。此致

Answer 2

试试这个语法：

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

<强>打字稿：

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

Answer 3

实际上，我能够制定指令，而且它似乎在桌面、iOS 和 android 上运行良好。

无需黑客。

通过

创建IonMask指令

ionic g directive

然后用这个替换它：

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

}

在您的组件上导入指令：

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

在你的组件模板中像这样使用它：

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

在你的组件的控制器（电话掩码）中：

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

来源：https://github.com/ionic-team/ionic-framework/issues/15424#issuecomment-552057007

使用Ionic 3应用程序输入掩码

3 个答案:

无需黑客。