Angular 材质 Datepicker 抛出多个自定义值访问器与未指定名称属性的表单控件匹配答案

【问题标题】：Angular material Datepicker throws More than one custom value accessor matches form control with unspecified name attributeAngular 材质 Datepicker 抛出多个自定义值访问器与未指定名称属性的表单控件匹配
【发布时间】：2019-12-02 23:37:18
【问题描述】：

我在 Angular (7) 应用程序中使用了材质日期选择器小部件。 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>

但是，这会在运行时引发以下错误。

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)

我已经使用表单控件“expiryDateInputCtrl”读取文本字段中的输入值，以检查用户是否输入了有效日期。据我所知，没有其他方法可以验证输入日期。谁能告诉我原因

【问题讨论】：

标签： angular angular-material angular-material-datetimepicker

【解决方案1】：

我发现了问题。我已使用 TrimValueAccessorModule 从输入控件中删除不需要的空格，这会导致此问题。下面是工作代码

<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>

在这里添加 class="ng-trim-ignore" 解决了这个问题

【讨论】：

【解决方案2】：

您可以使用FormBuilder 和formControlName 代替[formControl]

设置你的 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>

【讨论】：

读取输入文本字段值需要做很多工作，相反，我可以使用输入中的“(change)="functionName($event.target.value)”事件来获取值。我只想知道这个错误的原因
工作量很大？仅将 [formControl] 更改为 formControlName
在 .ts 中有很多额外的工作。例如：必须先创建 FormGroup。为此，我必须使用表单生成器。然后只有我可以创建 FormControler
我认为问题在于您有多个“expiryDateInputCtrl”（或者您有多个名为“expiryDateInputCtrl”的变量，但我在您的代码中看不到。
@ahmeticat，如果你只需要一个 formControl，你必须只使用一个 formControl - 不必总是创建一个表单或一个表单组-