Angular 带MatMatPicker错误的mat表单字段：多个自定义值访问器与表单控件匹配

我正在尝试将mat datepicker中的值绑定到表单控件。当我试着做一些像 我看到抛出此错误：

我也尝试过使用formControlName，但它抛出了相同的错误。我做错了什么

代码：

xhtml

…并使用formControlName

xhtml

---

尝试为输入指定名称属性

按如下方式更改代码：

<mat-form-field>
  <input matInput #input [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

---

尝试为输入提供名称属性

按如下方式更改代码：

<mat-form-field>
  <input matInput #input [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

---

我无法用您提供的Stackblitz重现该错误。但我确实清理了它并提供了一些修复：

• 将
  添加到模板
• 声明一个

  表单：FormGroup

• 插入

  FormBuilder

  ，并调用函数来构建表单

• 将

  Control

  添加到控件名称中，即

  dateControl

• 使用

  buildForm（）

  函数使用控件设置表单

---

我无法用您提供的Stackblitz重现该错误。但我确实清理了它并提供了一些修复：

• 将
  添加到模板
• 声明一个

  表单：FormGroup

• 插入

  FormBuilder

  ，并调用函数来构建表单

• 将

  Control

  添加到控件名称中，即

  dateControl

• 使用

  buildForm（）

  函数使用控件设置表单

---

尝试过，但出现了相同的错误。我还尝试将名称属性添加到切换和选取器中，并注意到错误仍然表示它是“未指定的名称属性”。您需要将

#input

添加到

标记中。我尝试过，但仍然得到相同的错误：（如果Angular 7改变了什么，我就使用Angular 7。我尝试过，但得到了相同的错误。我也尝试过向切换和选取器添加名称属性，并注意到错误仍然表示它是“未指定的名称属性”。你需要将

#input

添加到你的

标记中。我尝试过，但仍然得到了相同的错误。）（我使用的是Angular 7，如果它改变了什么。

  date = new FormControl(new Date());

<form-container title="Fake Title">
  <form [formGroup]="form" novalidate="" class="form" (ngSubmit)="onSubmitForm()">
    <mat-form-field>
      <input matInput [matDatepicker]="picker1" placeholder="Angular forms" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
      <mat-datepicker #picker1></mat-datepicker>
    </mat-form-field>

  buildForm(): FormGroup {

    return this.formBuilder.group({
      date: [new Date()]
    });

<mat-form-field>
  <input matInput #input [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

  constructor(private formBuilder: FormBuilder) {
    this.form = this.buildForm();
  }

  buildForm(): FormGroup {
    return this.formBuilder.group({
      date: this.dateControl,
      serializedDate: this.serializedDateControl
    });
  }