I am using Angular 12 and Angular Material Datepicker, and I want to be able to show strings like "Today" or "Current" when the selected date meets a condition. However I do not want my form to contain string values, i only want to mask the date value as a string.
For this I have tried to use masks like ngx-mask, angular2-text-mask or angular-imask, but all seems to have the same problem: they implement the ControlValueAccessor interface, which seems to clash with the Datepicker.
Error: More than one custom value accessor matches form control with unspecified name attribute.
I also tried vanilla mask libraries, like vanilla-text-mask, hoping it does not rely on ControlvalueAccessor. I have created this directive:
@Directive({
selector: '[currentDate]',
})
export class CurrentDateDirective implements OnInit, OnDestroy {
@Input() set currentDate(value) {
this._control = value[0];
this.applyMask();
}
private _control: FormControl;
maskedInputController;
constructor(private _el: ElementRef, private _datesHelperService: DateHelperService) {
}
private applyMask(): void {
const value = this._control.value;
const mask = ['Current']; // Only test that it replaces the date with a word
this.maskedInputController = textMask.maskInput({
inputElement: this._el.nativeElement,
mask,
});
}
ngOnDestroy(): void {
this.maskedInputController.destroy();
}
}
And then, in my form:
<input
matInput
[matDatepicker]="startDatePicker"
[min]="minDate"
[max]="maxDate"
formControlName="start"
[currentDate]="[dateRangeForm.get('start')]"
/>
But this just does nothing. I think the key is using some kind of mask as I do not want the actual value to change. Am I missing something?