Mask error after input value has been patched and not entered manually

I’m using Angular v6.1.10 with ngx-mask v7.8.9 where the mask is for a phone number on an input. The input when patched using HTTP response data sets the field to be invalid with a mask validation error of { 'Mask error': true }, and the form control is not required.

<input type="text" mask="[phone]" formControlName="phone">

this.form = this.fb.group({
  phone: [
    this.phone, [FormControlValidators.phone]
  ],
  fax: [
   this.fax, [FormControlValidators.phone]
  ]
});

I tracked this into the MaskDirective where it checks for special characters, which if not found will do a comparison on the value length.

The value in the comparison viewed in console is the masked value and not the raw number that you get when you manually type the phone into the input.

When Value Patched

1. The response data that is patched is 2509876543
2. The value for comparison contains mask [phone] on L180 which causes the error, and
3. Validity of the model fails with { 'Mask error': true } on L181

When Value Manually Entered

1. The entered data is 2509876543
2. The value for comparison doesn’t contain mask 2509876543 on L180, and
3. Validity of the model passes

It doesn’t seem to matter if the form controls are disabled or enabled, whether I patchValue or set the form group directly during initialization, or invoke markAsPristine or updateValueAndValidity afterwards. It only works if I manually enter the value provided from the response into the input, or when the user enables the form for editing I invoke this to get it to reset when it thinks is the model:

this.form.setValue(this.form.getRawValue());
this.form.get('phone').markAsPristine();
this.form.get('fax').markAsPristine();

[Thegrep01]

@mtpultz if you need to disable mask validation use [validation]="false"

[jeffnwarner]

I seem to be having this issue as well. When I create a form with a patched in value I can’t save until I manually edit the field.