自定义Angular表单组件如何触发change事件并正确绑定表单值

双值表单绑定适配 #

你需要基于ControlValueAccessor接口调整组件的表单适配逻辑，具体操作如下：

• 首先在组件的@Component装饰器的providers配置项中，正确注册NG_VALUE_ACCESSOR，不要遗漏multi: true参数：

providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => 你的组件类名),
    multi: true
  }
]

• 组件内部维护min和max两个私有变量对应两个range输入框的值，每次任意输入框触发值变更时，将两个值组装为{ min: xxx, max: xxx }格式的对象，调用registerOnChange注册的回调函数将组合值同步给父表单。
• 实现writeValue方法时，将表单传入的对象值拆分后分别赋值给两个内部变量，同步更新两个range输入框的显示状态。

自定义change事件调整 #

原生range输入框的change事件不会向外传递到自定义组件层，你需要自行声明组件级的输出事件：

• 在组件类中声明自定义change输出事件：@Output() change = new EventEmitter()
• 监听两个原生range输入框的input/change事件，在内部完成值更新逻辑后，向外抛出你需要的事件结构：

// 内部值更新后触发
this.change.emit({
  target: this, // 直接将组件实例作为事件目标
  value: { min: this.min, max: this.max }
})

• 外层使用组件时直接绑定(change)即可拿到自定义的事件对象，获取到的target就是当前组件实例，不会再指向原生input元素。

多实例复用说明 #

同一个表单内多次使用该组件时，只需要给每个组件实例设置不同的formControlName属性，各个实例的状态和值会自动隔离，不会出现互相干扰的问题。

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