如何清空Angular ngx-mydatepicker中手动输入的日期

问题根因 #

你遇到的问题是ngx-mydatepicker默认未开启输入框手动输入内容与组件值、表单控件的同步机制。手动输入的内容仅存在于输入框DOM节点中，组件内部没有感知到这部分值的变化，所以后续调用清空、选择新日期的操作时，组件认为当前值和需要更新的值一致，就不会触发输入框的视图更新。

解决步骤 #

1. 首先在HTML模板的日期选择器input标签上，添加[inputValueSync]="true"配置项，开启输入值同步能力：

<input class="form-control" style="float:none" placeholder="Select a date" ngx-mydatepicker name="myDate"
       formControlName="myDate" [options]="myOptions" #dp="ngx-mydatepicker" [inputValueSync]="true"/>

开启该配置后，手动输入的内容会实时同步到组件内部状态和绑定的FormControl中，后续的清空、选择新日期操作都能正常触发输入框的视图更新。

2. 可选优化：你当前的清除按钮已经直接调用了组件实例的dp.clearDate()方法，这个方法本身就会同时清空FormControl值和输入框内容，组件内单独写的clearDate()方法如果没有其他地方调用可以直接删除，避免重复操作导致的状态不一致。如果需要在组件内主动清空日期，建议通过ViewChild获取日期选择器实例后调用clearDate()方法，不要直接用patchValue修改表单值，避免状态不同步。

配置完成后重新测试即可解决手动输入后视图不更新的问题。

内容的提问来源于stack exchange，提问作者DevGo