Question

在我当前的项目中，我们有一个要求，即输入类型为“文本”而不是输入类型为“ number”，并且我们知道此文本框将始终输入小数。我们还希望限制用户仅使用数字键和小数点。我们已经使用自定义指令成功实现了这一点。但是现在还有另一个问题。输入框的值具有2向ngModel绑定，我们从component操纵值。例如，在组件加载时，此文本框的固定值为=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来更改输入的值。而是使用实际上是字符串类型的附加类变量。将输入值绑定到该字段（因为输入包含的是字符串），如果输入值更改(onChange)，则更新您的实际值。

在我的自定义指令十进制中，输入类型=“文本”的小数位数未显示为整数

1 个答案: