How to mask value in custom control - forms

Question

How to show transformed value in input (e.g. "1(234)567-890"), and have not transformed value ('1234567890')?
Is it possible to make separated values for maskInputEl and maskInput?
I have template:
<input #maskInputEl class="spacer" [type]="type"
[formControl]="maskInput"/>
And custom component:
export class MaskInputComponent implements ControlValueAccessor, OnInit, OnDestroy {
#ViewChild('maskInputEl') public maskInputEl: ElementRef;
#Input() public mask: any[];
public maskInput = new FormControl();
private _oldValue: string = '';
public ngOnInit(): void {
this.maskInput.valueChanges
.subscribe((value: string) => {
let valid = this.isValidValueByMask(value, this.mask);
if (valid) {
this._oldValue = value;
} else {
value = this._oldValue;
}
this._onChangeCallback(value);
this.onChange.emit(value);
this.maskInputEl.nativeElement.value = value;
},
(err) => console.warn(err)
);
}
public toggleActive(value) {
//
}
public registerOnChange(fn: any): void {
this._onChangeCallback = fn;
}
public registerOnTouched(fn: any): void {
this._onTouchedCallback = fn;
}
public _onChangeCallback: Function = (_: any) => {
//
}
public _onTouchedCallback: Function = (_: any) => {
//
}
public makeActive() {
this.maskInputEl.nativeElement.focus();
}
public writeValue(value: string): void {
this.maskInput.setValue(value);
}
public ngOnDestroy(): void {
//
}
private isValidValueByMask(value: string, mask: RegExp[]): boolean {
//
}
}

Answer 1

Yes, it's possible. I did something similar for my own project where I wanted to create a MoneyFieldComponent that returned a value in cents, but allowed the user to type their money value in dollars and cents.
The basic concept is that your component has to store the raw value, but, you display the formatted value in your text field. In addition, as the user interacts with your text field, you update your 'inner value' of your component with the raw value.
Note that you shouldn't use ngModel to update your text field - ngModel has some async behaviour that plays havoc in these scenarios - you can accomplish the same using raw javascript (or in my case, i used a FormControl).
Sample:
#Component({
selector: 'ec-money-field',
template: `
<md-input-container *ngIf="editMode">
<input #input mdInput class="value" type="text"
(input)="updateInnerValue(input.value)"
(blur)="formatTextValue()"
[formControl]="control" />
</md-input-container>
`,
providers: [
{provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => MoneyFieldComponent)},
]
})
export class MoneyFieldComponent implements OnInit, ControlValueAccessor {
private valueInCents = 0;
control = new FormControl(0);
private onChange: Function = (_: any) => {};
private onTouch: Function = (_: any) => {};
constructor() { }
#Input()
get value(): number {
return this.valueInCents;
};
// if you update the component by using the value property,
// propagate that change to the text field
set value(newValueInCents: number) {
this.valueInCents = newValueInCents;
this.control.setValue(centsToDollars(newValueInCents));
}
ngOnInit() {
}
// convert the masked value - i.e. what the user types
// into the actual numerical value that will be stored
// You'll have to provide your own conversion function
// to convert the user typing 1(855) 555 1234 to 1865551234
updateInnerValue(dollarValueString: string) {
this.valueInCents = dollarsToCents(dollarValueString);
this.onChange(this.valueInCents);
}
formatTextValue() {
this.value = this.value;
}
writeValue(newValue: number): void {
this.value = newValue;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouch = fn;
}
}
Note that above is a simplified version of the component. The full version can be found on Github.