Angular响应式表单数值字段修改未同步，变更日期才更新表单值问题

问题根因 #

你为所有表单控件单独配置了updateOn: 'blur'参数，该配置的作用是：只有当控件失去焦点时，输入的内容才会同步到FormGroup中。
你点击数值输入框的上下箭头修改值时，输入框始终处于聚焦状态，没有触发失焦事件，因此FormControl的存储值不会更新，此时调用showValues()打印的自然是旧的表单数据。
当你点击日期选择器时，原本处于聚焦状态的数值输入框会失去焦点，触发blur事件，之前修改的数值才会同步到FormGroup中，因此此时打印的结果会包含最新的数值。你可以测试修改数值后点击页面空白处让输入框失焦，无需修改日期也能看到表单值同步更新，进一步验证该根因。

可行解决方案 #

根据你的业务需求可以二选一：

• 移除各控件的updateOn: 'blur'配置：如果业务没有要求必须失焦才更新表单值，直接删除每个FormControl配置中的updateOn字段即可。Angular默认会在输入值变化时立刻同步到FormGroup，满足实时获取最新表单值的需求。
• 保留updateOn: 'blur'配置的适配方案：
  1. 将模板中数值输入框绑定的(change)="showValues()"改为(blur)="showValues()"，确保打印行为在表单值同步完成后触发，符合你配置的更新逻辑。
  2. 如果需要在输入过程中实时获取当前输入的内容，可以通过模板引用变量直接读取输入框DOM值，无需依赖FormGroup的同步结果。

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