Mask editor incorrect ControlValueAccessor implementation

[damyanpetev]

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

1. Open https://stackblitz.com/edit/mask-value-accessor
2. Observe the state of the first mask editor
3. 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.