如何使用带有反应形式的垫日历？

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 datepicker is a better option，它支持开箱即用的反应式表单控件。

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

addList(){ this.packageTypeForm.addControl(this.packageTypeForm.controls.list.value, this.formBuilder.array([])); this.listControls.push(this.packageTypeForm.controls.string.value); console.log(this.packageTypeForm.controls); }

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

Answer 2

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

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