p-inputMask ng-model not clearing for invalid value

Question

I am using inputMask field from PrimeNG

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

{{attr.attributeValue}}

But if I enter a in the textbox and focus out, that textbox is clearing but ng-model attr.attributeValue is still hold value a_/__. How could we clear the ng-model as well ?

Answer 1

By looking to the source of inputMask, you can see that there is a boolean property called filled.

So we can access the value of that property to know if the input is filled or not through ViewChild and by using onBlur event where you can reinitialize your model if it is not filled.

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: '' };
  }
}

See StackBlitz