mat-form-field w / matMatepicker Ошибка: более чем один пользовательский метод доступа к значениям соответствует элементу управления формы

Question

Я пытаюсь привязать значение из mat-datepicker к элементу управления формы.Когда я пытаюсь сделать что-то вроде в этом примере я вижу эту ошибку:

"Uncaught (in promise): Error: More than one custom value accessor matches form control with unspecified name attribute
Error: More than one custom value accessor matches form control with unspecified name attribute"

Я тоже пытался использовать formControlName, но он выдаетта же ошибка.Что я здесь не так делаю?

Код:

xhtml

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

машинопись

  date = new FormControl(new Date());

... и с formControlName

xhtml

<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()]
    });

Answer 1

Мне не удалось воспроизвести эту ошибку с помощью предоставленного вами Stackblitz.Но я все исправил и предоставил ряд исправлений:

• Добавить <form [formGroup]="form"> в шаблон
• Объявить form: FormGroup; в компоненте
• InjectFormBuilder и вызов функции для построения формы

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

• Добавьте Control к именам элементов управления, например dateControl
• Используйте buildForm() функция для настройки формы с помощью элементов управления

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

Обновлен StackBlitz

Answer 2

Попробуйте дать вашему входу атрибут имени

Измените ваш код следующим образом:

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