-
Notifications
You must be signed in to change notification settings - Fork 160
Description
Description
The mask editor causes the model to become dirty even before user interaction, showing invalid styling before the user interacts with the control. This is because the writeValue also circles back the value to the model:
igniteui-angular/projects/igniteui-angular/src/lib/directives/mask/mask.directive.ts
Lines 341 to 352 in d4c72f9
| public writeValue(value) { | |
| if (this.promptChar && this.promptChar.length > 1) { | |
| this._maskOptions.promptChar = this.promptChar.substring(0, 1); | |
| } | |
| this.value = value ? this.maskParser.parseValueByMaskOnInit(value, this._maskOptions) : ''; | |
| if (this.displayValuePipe) { | |
| this.value = this.displayValuePipe.transform(this.value); | |
| } | |
| this.dataValue = this.includeLiterals ? this.value : value; | |
| this._onChangeCallback(this.dataValue); |
Also if updateOn: 'blur' is used the mask never notifies the model (_onTouchedCallback not called on blur) and thus value changes are never committed.
- igniteui-angular version: 9.0.2
- browser: N/A
Steps to reproduce
- Open https://stackblitz.com/edit/mask-value-accessor
- Observe the state of the first mask editor
- Fill in the second and blur
Result
First mask editor loads up initially with invalid visual indication (red) and the model is marked as dirty:

The second editor even after filling up the value, remains in error style and the model is never updated:

Expected result
This first editor should not dirty flag the model on init and the second editor should correctly update the model value on blur.