Angular Material v17 mat-slider绑定响应式表单遇多值访问器匹配错误

问题原因 #

Angular Material v17的mat-slider组件本身已经实现了ControlValueAccessor，用于和表单系统交互。而内部的<input matSliderThumb>元素同样带有自己的值访问器实现。当你直接给这个input元素添加formControlName时，表单控件会检测到多个匹配的值访问器，从而抛出Error: More than one custom value accessor matches form control with unspecified name attribute错误。

解决方案 #

将formControlName绑定到外层的mat-slider元素上，而非内部的input滑块拇指控件。mat-slider作为完整的表单组件，会自动处理内部交互与表单值的同步。

修正后的模板代码：

<mat-slider color="primary"
            min="1"
            max="10"
            step="1"
            discrete
            showTickMarks
            formControlName="max_retries">
  <input matSliderThumb/>
</mat-slider>

说明 #

• mat-slider组件已经封装了表单值的读取、写入和状态同步逻辑，无需单独给内部的input控件绑定表单属性
• 仅保留<input matSliderThumb>的结构即可，它会作为滑块的交互载体，与外层的mat-slider组件协同工作

内容的提问来源于stack exchange，提问作者rami-sf