ngx-mask
ngx-mask copied to clipboard
JsDaddy
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 🔥 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
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
Similar problem here using Reactive Forms with Angular, ngx-mask version 11.1.5.
Using formControl.setValue("73213"), mask is not applied.
Possible workaround is to setValue with the desired format: formControl.setValue("73-632-34-32-3")
I have the same problem and trying to set value with the desired format doesn't work for me
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.
Subscribing for any news on this.
I've tried several approaches to set value programmatically:
- ControlValueAccessor.writeValue method
- Setting input element's 'value' attribute
- Reactive form's FormControl.setValue method (Value of FormControl is set correctly, however the input field stays empty)
- Setting input element ref's nativeElement.value (Both native element's value and field in DOM are empty)
I've tried to pass both unmasked value and manually edited one to match mask. None of them worked for me. I'm using currently newest version = 13.1.14
Also have this issue. I'm using the mask for formatting on an input that I set programmatically via the value property.
The same problem.
But you can use MaskPipe directly, as workaround:
evt.target.value = this._maskPipe.transform(evt.target.value + 0, '000,000,000');
Don't forget to declare it in component's constructor, like this:
constructor(private _maskPipe: MaskPipe) { }
I meet the same problem.
I use insertText as a workaround, It works well.
document.execCommand('insertText', false, value)
But execCommand is Deprecated! in MDN
I had the same issue the formControlValue is changed but the value of the dom element is not updated. To trigger a modelChange event I added [ngModel]="value" on the input and the value was updated in de textinput tag
@Abdullah0991 @JimmyLovely @nanosistem @adammendoza @KyselMatus @david-bulte Hi . Could you provide stackblitz
@Abdullah0991 @JimmyLovely @nanosistem @adammendoza @KyselMatus @david-bulte Thanks for your using Ngx-Mask. Please update to latest version. It example, all work as expected - https://stackblitz.com/edit/angular-skkssa?file=src%2Fmain.ts