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

Question

我正在使用来自 PrimeNG

的 inputMask 字段

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

{{attr.attributeValue}}

但是，如果我在文本框中输入 a 并将焦点移出，该文本框会被清除，但 ng-model attr.attributeValue 仍然保持值 a_/__。我们怎样才能同时清除 ng-model？

Answer 1

通过查看 source of 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

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

p-inputMask ng-model not clearing for invalid value

input-mask

primeng

angular