如何使用ngModel控制绑定的值类型(数字被扭曲为字符串)?

Question

我问了一个问题并让它工作。但是，我注意到，尽管提供的数据由如下声明的对象组成：

export interface GisPoint { e: number; n: number; }

当用户输入一个值时，原始内容 { e： 12， n： 34 } 变为字符串，即{ e： "123"， n： 34 }。我知道输入的结果将被假定为字符串，因此我必须对其进行转换。但是，当绑定通过ngModel时，我实际上并没有明确地对keyUp或blur做出反应。

我必须明确地这样做吗？如果是这样，那么使用ngModel真的没有意义。在输入编辑后的值时能够保留类型会非常漂亮。

Answer 1

给定此 HTML 标记：

<input type="number" [(ngModel)]="data.age">

您将在模型中获得所需的数字。Angular 不会将其转换为字符串。一个"副作用"是浏览器将添加这些数字微调器。

隐藏它们的最简单方法是使用一个小的 css 规则：

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance:textfield;
}

有关 css 的更多信息 这里 和 这里.

检查这个工作堆栈闪电战。

Answer 2

您可以实现组件的 ControlValueAccessor 接口，以便指定表示模型的值。

这里有几篇好文章可以开始：

• https://medium.com/@majdasab/implementing-control-value-accessor-in-angular-1b89f2f84ebf
• https://alligator.io/angular/custom-form-control/