[英]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. 我在我的angular(7)应用程序中使用了一个重要的datepicker小部件。 The html is given below. 的HTML如下。
<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. 我已使用formcontrol“ expiryDateInputCtrl”读取文本字段中的输入值,以检查用户是否输入了有效日期。 As far as I'm aware, there is no other way to validate the input date. 据我所知,没有其他方法可以验证输入日期。 Can anyone please tell the reason 谁能告诉我原因
You can use FormBuilder
and formControlName
instead of [formControl]
您可以使用FormBuilder
和formControlName
代替[formControl]
set your html : 设置你的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>
I found the issue. 我发现了问题。 I have used the TrimValueAccessorModule to remove unwanted spaces from input controls and that cause this issue. 我已经使用TrimValueAccessorModule从输入控件中删除了不需要的空格,这会导致此问题。 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 在这里添加class =“ ng-trim-ignore”解决了该问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.