时间戳

首页 > 解决方案 > p-inputMask ng-model 未清除无效值

angular - p-inputMask ng-model 未清除无效值

问题描述

我正在使用inputMaskPrimeNG 的字段

<p-inputMask name="maskValue" [(ngModel)]="attr.attributeValue" mask="aa/99" placeholder="aa/99"></p-inputMask>

{{attr.attributeValue}}

但是，如果我输入a文本框并聚焦，则该文本框正在清除，但 ng-modelattr.attributeValue仍然保留 value a_/__。我们怎样才能清除 ng-model 呢？

标签： angularprimenginput-mask

解决方案

通过查看inputMask 的来源，您可以看到有一个名为 的布尔属性filled。

因此，我们可以访问该属性的值以了解输入是否已填充，ViewChild并通过使用onBlur事件，如果未填充，您可以在其中重新初始化模型。

HTML

<p-inputMask #myInputMask name="maskValue" [(ngModel)]="attr.attributeValue" mask="aa/99" placeholder="aa/99" (onBlur)="isInputMaskFilled($event)"></p-inputMask>

TS

@ViewChild('myInputMask') myInputMask: InputMask;

isInputMaskFilled(event) {
  if(!this.myInputMask.filled) {
    this.attr = { attributeValue: '' };
  }
}

见StackBlitz

推荐阅读