Ngx-mask: Interferes with Disabled Attribute

[cabbott65]

I'm trying to use a mask with an _input_ that has the _disabled_ attribute that can be toggled off and on:

template:

<input id="phone" name="phone" mask="000-000-0000" [(ngModel)]="phoneNumber" [disabled]="isDisabled" />
<button type="button" (click)="toggleDisabled()">Toggle</button>

component:

export class MaskComponent {
    phoneNumber: string = '1231231234';
    isDisabled: boolean = false;

    toggleDisabled() {
        this.isDisabled = this.isDisabled ? false : true;
    }
}

The disabled toggle works correctly until I add the _mask_ directive. When I do, it disables the _input_ and seems to ignore the _disabled_ attribute.

[kcoram]

I encountered the same problem. What I noticed is that the disable/re-enable behavior works correctly if I do not bind to a form control (e.g. do not have [(ngModel)]="phoneNumber" ). When I do have a form control, as soon as I pass [disabled]="true" in, the input remains disabled from then on, even if I set [disabled]="false".

[natan88]

The problem also happened to me.

Work around the problem by creating two inputs.

[NepipenkoIgor]

@natan88 @kcoram @cabbott65 Please try last version and give feedback

[natan88]

The last version worked perfect for me.
Thank you!