Angular - Input with ngx-mask MatDatepicker and reactive form

Question

I would like to add a reactive form control over a form and an error is triggered:

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

Everything works separately, reactive form validation, mask or matDatepicker, any couple combination also works, but the three together prompt the error.

Here is my code:

In component.ts

formGroup = new FormGroup({
    date: new FormControl()
  });

In component.html

    <mat-form-field>
      <input type="text" matInput [matDatepicker]="date_picker" mask="d0/M0/0000" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="date_picker"></mat-datepicker-toggle>
      <mat-datepicker #date_picker></mat-datepicker>
    </mat-form-field>

I'm using:

"@angular/cli": "8.3.19"
"ngx-mask": "8.1.7"
"@angular/material": "8.2.3"

Answer 1

I am struggling the same issue. According to this thread, there is no solution only a workaround: Error: More than one custom value accessor matches form control with unspecified name attribute

I used the workaround mentioned, with vanilla-text-mask as a temporary (I hope) solution, but there is no activity on the above thread so... Here is the link to the workaround: Use more than one CustomValueAcessor in one Input field

Hope it helps!