Ngx Color组件RGBA/HSLA输入框值回显异常问题求助

问题描述 #

Ngx Color组件的RGBA和HSLA输入框存在功能异常：将输入值从255改为0后，通过撤销操作恢复回255，但切换到其他输入框或输入框失焦时，显示的值会变成25而非255。

排查方向 #

• 输入值格式化逻辑缺陷：检查组件内部失焦/切换输入框时的数值处理代码，重点看是否存在错误的字符串截取、正则匹配或数值截断逻辑。大概率是撤销后的255在格式化时被错误处理，仅保留了前两位数字。可定位组件的onBlur、onChange相关方法，验证数值格式化逻辑的正确性。
• 表单状态同步冲突：Angular表单与组件内部状态可能存在同步延迟。撤销操作可能仅更新了输入框的视图值，但未同步到组件的颜色状态，失焦时组件用旧状态覆盖了视图值。可调试组件的ControlValueAccessor实现，确认writeValue和registerOnChange方法是否正确处理了撤销后的状态同步。
• 撤销事件处理不完整：组件可能未正确监听键盘撤销（Ctrl+Z）事件，导致输入框的临时值未被完整保存到组件状态。失焦时组件从状态读取错误值，从而显示25。可检查组件的键盘事件监听逻辑，确认撤销事件触发时是否完整更新了内部颜色状态。
• 底层颜色库处理错误：Ngx Color可能依赖第三方颜色处理库（如chroma-js），检查这类库在解析、格式化颜色值时是否存在边界值处理错误（如将255错误解析为25）。可单独测试颜色值的转换逻辑，验证是否为底层库的问题。
• 自定义修复方案：若仓库已停止维护，可考虑fork仓库后修改对应代码：比如在输入框失焦时强制校验数值范围（0-255），确保完整保留合法数值；或重写输入框事件处理逻辑，正确同步视图值与组件状态。

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