Mask not applied if input value changed programmatically

🐞 bug report

Is this a regression?

Doesn’t know, this is my first use of this library.

Description

When the value of the input element changed programmatically, the mask not applied!

🔬 Minimal Reproduction

<input matInput name="c-rx" placeholder="000,000,000" mask="000,000,000" [validation]="true" [range]="[134000000,470000000]" [(ngModel)]="editChannelObj.rx" #rx="ngModel" (blur)="onInputBlur($event)" required>

onInputBlur(evt) {
  const MAX_LEN = 9;
  while (evt.target.value.trim().length < MAX_LEN) {
    evt.target.value = evt.target.value + 0;
  }
}

🔥 Exception or Error

No Exception or Error.

🌍 Your Environment

Angular Version:

Angular CLI: 10.2.1
Node: 12.8.1
OS: win32 x64

Angular: 10.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1100.6
@angular-devkit/build-angular      0.1100.6
@angular-devkit/core               10.2.1
@angular-devkit/schematics         10.2.1
@angular/cdk                       10.2.7
@angular/cli                       10.2.1
@angular/flex-layout               10.0.0-beta.32
@angular/material                  10.2.7
@angular/material-moment-adapter   10.2.7
@schematics/angular                10.2.1
@schematics/update                 0.1002.1
rxjs                               6.5.5
typescript                         3.9.6

Anything else relevant?

Browser tested: Chrome v87.0.4

[david-bulte]

I have a similar problem, but only in my tests. If I am using the mask like so:

              <input
                mask="0-00000-00-000"
                [showMaskTyped]="true"
                placeHolderCharacter="_"
                formControlName="practitionerName"
              />

When I change the value or disable the control (through the reactive Forms api, e.g. form.get(‘practitionerName’).setValue(…)), the mask is not applied or the control is not disabled.

When I remove the mask directive, the control is disabled.

I have this bug since upgrading form ^9.1.4 > ^11.1.5

[JohnnyDevNull]

Same here. The value ist change via (paste) handler and sets the value via formControl.setValue(), but the mask is not applied, so the formControls validator cannot do it’s job.