1

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

dGayand
  • 599
  • 1
  • 7
  • 15

2 Answers2

2

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

dGayand
  • 599
  • 1
  • 7
  • 15
1

You can use FormBuilder and formControlName instead of [formControl]

set your html :

 <form [formGroup]="tripFormGroup">
    <mat-form-field style="width: 100%">
        <input matInput [matDatepicker]="picker" placeholder="Expiry Date" 
                 formControlName="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>
    </mat-form-field>
   ...
 </form>
ahmeticat
  • 1,899
  • 1
  • 13
  • 28
  • That's a lot of work just to read the input text field value, instead, I can use the "(change)="functionName($event.target.value)" event in the input to get the value. All I want to know is the reason for this error – dGayand Jul 24 '19 at 19:15
  • A lot of work? Only change `[formControl]` with `formControlName` – ahmeticat Jul 24 '19 at 19:24
  • In the .ts there are lot of additional work. Ex: have to create the FormGroup first. For that, I have to use the form builder. Then only I can create the FormControler – dGayand Jul 24 '19 at 19:40
  • I think that the problem is that you has severals "expiryDateInputCtrl" (or you has more that one variable called "expiryDateInputCtrl", but I can not see in your code. – Eliseo Jul 25 '19 at 06:22
  • @ahmeticat, if you only need a formControl, you must use only a formControl -it's not necesary create always a form, or a formgroup- – Eliseo Jul 25 '19 at 06:23