Angular 输入范围滑块小数数据绑定值舍入难题的解决之道

javascript

2024-03-21 01:20:30

Angular 输入范围滑块中舍入小数数据绑定值的解决方案

问题：小数数据的舍入

在 Angular 的表单中使用范围滑块时，可能会遇到这样的问题：当数据绑定值是浮点数时，滑块会将值舍入到最接近的整数，这导致在某些情况下显示不准确的值。

原因：用户代理四舍五入

当输入数据不符合滑块的步进配置时，浏览器或用户代理可能会四舍五入到最接近的有效值。当有两个同样接近的选项时，它优先选择正数。

解决方案：禁用用户代理验证

一种解决方法是禁用用户代理的验证。这可以通过在表单标签中使用 novalidate 属性来实现。

<form novalidate>
  <!-- 其余的表单元素 -->
</form>

然而，禁用用户代理验证并不是一个可靠的解决方案，因为用户代理的行为可能会因浏览器和版本而异。

使用自定义值舍入函数

一个更可靠的解决方案是使用自定义值舍入函数。这可以通过使用 Angular 的 ValueAccessor 接口来实现。

import { ControlValueAccessor, NG_VALUE_ACCESSOR, forwardRef } from '@angular/forms';

@Directive({
  selector: 'input[type=range]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomRangeValueAccessor),
      multi: true
    }
  ]
})
export class CustomRangeValueAccessor implements ControlValueAccessor {
  private onChange: Function;
  private onTouched: Function;

  writeValue(value: number): void {
    this.inputElement.value = value.toFixed(2);
  }

  registerOnChange(fn: Function): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: Function): void {
    this.onTouched = fn;
  }
}