如何将 mat-calendar 与反应形式一起使用？

Question

input我想使用没有反应形式的日历组件。

我找到了该组件mat-calendar并尝试了以下操作：

<mat-calendar formControlName="appointment"></mat-calendar>

相应的 TypeScript 文件有这样的：

this.form = this.formBuilder.group({ appointment: [''] });

但显示错误：

ERROR Error: No value accessor for form control with name: 'appointment'

Answer 1

如果您想将其用作表单的日期选择器，那么使用Material 日期选择器是一个更好的选择，并且它支持开箱即用的反应式表单控件。

但是，如果您想要一个静态日历（即始终可见），并且只需要在用户选择一个值时更新您的表单，那么您可以监听它的更改事件，并自己设置您的表单值。

<mat-calendar [selected]="form.get('appointment').value" (selectedChange)="updateFormDate($event)"></mat-calendar>

updateFormDate(value: any) {
    this.form.get('appointment').setValue(value);
}

Answer 2

@prettyfly 的回答很准确。我只是想补充一点，它不起作用的原因是 mat-calendar 作为组件没有实现 ControlValueAccessor，这是 FormControls 工作所需的接口。

如果您想更好地封装事物，您可以采用@prettyfly的解决方案并将其包装在自定义组件中并在其上实现ControlValueAccessor。只有这样你才能按照你描述的方式使用它。