Material Date Picker Mask with Form Control

Question

When I am using Angular 6 Material Date Picker with any mask(ngx-mask, angular2-mask,angular2-text-mask) and use formControlName, I get an error:

ERROR Error: More than one custom value accessor matches form control with unspecified name attribute

Is there any mask that is working with Material Date Picker and formControlName attribute?

<input matInput [matDatepicker]="myDatepicker" formControlName="dateOfbrd" mask="00/00/0000">
  <mat-error *ngFor="let validation of validationMessages.dateOfDischarge">
  <mat-error class="error-message" *ngIf=enrfrm.get('dateOfbrd').hasError(validation.type)">
    {{validation.message}}
  </mat-error>
</mat-error>
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

Answer 1

The error is caused by Datepicker and mask attached to the same input. These components try to paralelly modify value stored in model.

One of possible solutions is having Datepicker attached to hidden input and mask on the visible one.