[SOLVED] Angular material Datepicker throws More than one custom value accessor matches form control with unspecified name attribute

Angular material Datepicker throws More than one custom value accessor matches form control with unspecified name attribute

I have used a material datepicker widget in my angular (7) application. The html is given below.

 <mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Expiry Date" [formControl]="expiryDateInputCtrl">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-hint *ngIf="isExpiryDateInvalid()" [ngStyle]="{'color': 'red'}" align="start">Invalid Expiry Date</mat-hint>

However, this throws below error at runtime.

More than one custom value accessor matches form control with unspecified name attribute
at _throwError (forms.js:2144)
at forms.js:2202
at Array.forEach (<anonymous>)
at selectValueAccessor (forms.js:2191)
at new FormControlDirective (forms.js:5042)
at createClass (core.js:22160)
at createDirectiveInstance (core.js:22029)
at createViewNodes (core.js:23255)
at createEmbeddedView (core.js:23163)
at callWithDebugContext (core.js:24177)

I have used the formcontrol "expiryDateInputCtrl" to read the input value in the text field to check whether the user has entered a valid date. As far as I'm aware, there is no other way to validate the input date. Can anyone please tell the reason

Solution

I found the issue. I have used the TrimValueAccessorModule to remove unwanted spaces from input controls and that cause this issue. Below is the working code

<mat-form-field style="width: 100%;">
<input matInput [matDatepicker]="picker" placeholder="Expiry Date" (dateChange)="onExpiryDateChange($event)" class="ng-trim-ignore" name="expiryDate" [formControl]="expiryDateInputCtrl">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-hint *ngIf="isExpiryDateInvalid()" [ngStyle]="{'color': 'red'}" align="start">Invalid Expiry Date</mat-hint>

here adding class="ng-trim-ignore" solved the issue