Angular Material日期选择器的输入/更改不会自动更新响应式表单控件的值。这是因为日期选择器是通过打开一个浮动面板来进行选择的,它不会触发表单控件的值更改事件。
为了解决这个问题,我们可以使用日期选择器的valueChange事件来手动更新表单控件的值。下面是一个示例代码:
在组件的HTML模板中,使用mat-datepicker指令绑定日期选择器,并监听其valueChange事件:
在组件的TypeScript代码中,定义一个日期选择器的值更改事件处理函数,并在其中更新表单控件的值:
import { FormControl } from '@angular/forms';
export class MyComponent {
dateControl: FormControl = new FormControl();
onDateChange(event: MatDatepickerInputEvent) {
this.dateControl.setValue(event.value);
}
}
在这个示例中,我们创建了一个FormControl对象来维护日期选择器的值。在onDateChange事件处理函数中,我们使用setValue方法手动更新dateControl的值。
这样,无论是直接键入日期还是选择日期选择器中的日期,都会正确更新表单控件的值。
希望这个示例能够帮助你解决问题!