如何在Angular 5中通过自定义掩码强制绑定属性

我正在处理将一些输入屏蔽为货币格式的问题。我发现了一个不错的插件，目前运行良好

每次使用键盘在

中写入内容时，掩码都可以正常工作

但是我在

input

标签下面选择了

按钮

，它提供了一些默认的“提示”值供用户单击

单击其中一个按钮时，我正在调用

click（）

callback来绑定后面的属性，这是可行的，但没有应用掩码

如何更新输入以将掩码应用于绑定属性

我用的是离子骨架3，5

我的html：

<form [formGroup]="ammountForm">
    <ion-item class="input-item">
      <ion-input type="tel" [textMask]="{mask: ammountMask, guide: false}" placeholder="Ingresa el valor" formControlName="ammount"
        [(ngModel)]="ammount"></ion-input>
    </ion-item>

    <ion-item class="err-hint" no-lines *ngIf="ammountForm.controls.ammount.invalid">
      <p>La cantidad ingresada no es correcta</p>
    </ion-item>

    <ion-slides>
      <ion-slide class="def-slide" *ngFor="let ammount of defaultAmmounts">
        <button (click)="onSlideClick(ammount)" class="slide-btn" ion-button color="light-blue-grey" outline>${{ammount}}</button>
      </ion-slide>
    </ion-slides>
    <button class="continue-btn" color="cornflowerblue" [disabled]="ammountForm.controls.ammount.invalid" ion-button [full]="isMobile ? '' : null"
      (click)="triggerPhase4(phoneNumber)">Continuar</button>
  </form>

这里有一些图片给你一个想法

任何关于如何解决这一问题的想法都将受到高度赞赏

编辑：这是我声明要使用的掩码的地方

import createNumberMask from 'text-mask-addons/dist/createNumberMask'

ngOnInit() {
this.phoneMask = BdbMaskProvider.phoneMask;
this.ammountMask = createNumberMask({})
}

---

他们有一个以编程方式设置值的错误（来源：）

修复它的一种方法（在上面的链接中建议）是引用输入并调用它们用于屏蔽的方法：

@ViewChild('telInputRef')
inputElement: MaskedInputDirective; 

onSlideClick(ammount: number) {
   this.inputElement.onInput(ammount);
}

---

此外，您还需要将选择器引用添加到输入元素，然后才能这样做，如

，感谢@DainiusLuksa指出了这个问题

我在同一条线上得到了另一个建议

我必须修改语法以访问ionic组件的本机元素：

@ViewChild('ammountRef', { read: ElementRef}) inputElement: any;

onSlideClick(ammt: number) {
//set value to form control in order get the validators
this.ammountForm.controls['ammount'].setValue(ammt);

//fire event to force new input through mask
if (this.inputElement != undefined) {
  const input = this.inputElement.nativeElement;
  input.value = ammt;
  input.dispatchEvent(new Event('input'));

}
}

在Html中添加选择器：

<ion-input id="ammtRef" type="tel" [textMask]="{mask: ammountMask, guide: false}" placeholder="Ingresa el valor" formControlName="ammount"
        #ammountRef></ion-input>

---

如果您正在使用FormGroup，请确保您也以编程方式设置值，因为验证程序不会仅通过设置输入元素来工作

什么是屏蔽插件？称为文本屏蔽，请参阅以下链接：非常感谢您指出问题，不幸的是，我无法让它与该黑客一起工作，我有

无法读取未定义的值

@ViewChild('ammountRef', { read: ElementRef}) inputElement: any;

onSlideClick(ammt: number) {
//set value to form control in order get the validators
this.ammountForm.controls['ammount'].setValue(ammt);

//fire event to force new input through mask
if (this.inputElement != undefined) {
  const input = this.inputElement.nativeElement;
  input.value = ammt;
  input.dispatchEvent(new Event('input'));

}
}

<ion-input id="ammtRef" type="tel" [textMask]="{mask: ammountMask, guide: false}" placeholder="Ingresa el valor" formControlName="ammount"
        #ammountRef></ion-input>