在我的自定义指令 decimal to input type="text" 整数中不显示小数位

Question

在我当前的项目中，我们有一个要求，我们有一个输入类型="text" 而不是输入类型="number" 并且我们知道这个文本框将始终输入小数。我们还想限制用户只能使用数字键和小数点。我们已经使用自定义指令成功实现了这一点。但现在还有另一个问题。输入框的值有 2-way ngModel 绑定，我们操作来自组件的值。例如，在加载组件时，此文本框有一个固定值 = 1。在文本框中，该值显示为 1，但我们希望在文本框中将其显示为 1.0000。

我们已经尝试实现 OnChanges 接口来检测 ngModel 的变化，然后呈现带小数位的整数，但它似乎不起作用。有什么我们可以做的吗？

Directive Class:
export class AllowDecimalDirective implements OnChanges
{

@Input() decimalPrecision: number = 0;
@Input() inputValue: number = 0;

constructor(private renderer: Renderer2, private element: ElementRef) {
}

ngOnChanges(changes: SimpleChanges): void {
    const element = this.element.nativeElement;
    this.renderer.setProperty(element, 'value', Number(this.inputValue).toFixed(this.decimalPrecision));
}
}

HTML Usage:
<input allowDecimal readonly name="Rate{{i}}" type="text" class="form-control" [(ngModel)]="record.Rate" required #rate="ngModel" decimalPrecision="4" inputValue="{{record.Rate}}"/>

Answer 1

您的方法不是 Angular 应有的使用方式。您的代码有两个问题。

为什么不起作用：当值发生变化时，你用十进制表示替换值。由于您有双向数据绑定，这将触发 valueChange 事件，该事件会将输入解析为数字（因为 inputValue 被定义为类型 number），这将导致小数点被删除（因为它们只是零）。
为什么不是 Angular 方式：您不应该使用 renderer 来改变输入值。而是使用一个额外的 class 变量，它实际上是字符串类型。将输入值绑定到此字段（因为输入包含的毕竟是字符串）并在输入值更改时更新您的实际值 (onChange).

在我的自定义指令 decimal to input type="text" 整数中不显示小数位

In my custom directive decimal to input type="text" decimal places are not shown for whole numbers

angular-directive

angular