在Angular2中只允许输入一位小数

Posted 2023-03-05

【中文标题】在Angular2中只允许输入一位小数

【英文标题】：Allow only one decimal on input in Angular2

【发布时间】：2017-08-30 16:59:27

【问题描述】：

这是我的输入：

<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number">

我需要的是，当有人进入时

“1”

，我需要它返回

“1.0”。

关于模糊 这怎么可能？

【问题讨论】：

使用@Pipe。例如：***.com/questions/38456114/…

@SrAxi，请发布示例，谢谢。

minimumRange的类型是字符串还是数字？

minimumRange的类型是：数字

您需要输出 1.0 是因为样式或服务器上的某些处理或其他需要小数点后 1 位的数字吗？因为"1.0"的数字表示是1...

【参考方案1】：

使用 数字 @Pipe 您应该能够实现这一点。

<input [ngModel]="minimumRange | number : '1.1-2'" min="1" (ngModelChange)="minimumRange=$event" placeholder="0.0" step="0.1" type="number">

更多信息：

What are the parameters for the number Pipe - Angular 2 http://www.concretepage.com/angular-2/angular-2-decimal-pipe-percent-pipe-and-currency-pipe-example

希望对您有所帮助！好的编码兄弟！

更新：

如果我们像这样在模型中使用@Pipe：

<input [(ngModel)]="myModel| uppercase">

它会抛出以下错误：

解析器错误：X 列的操作表达式中不能有管道

我们只需要把它改成这样：

<input [ngModel]="myModel| uppercase" (ngModelChange)="myModel=$event">

更新2：

添加了(ngModelChange)="minimumRange=$event" 以保留双向绑定功能。

正如@n00dle 指出的那样，删除() 会删除2 路绑定功能。所以在 2-way-binding 中使用 @Pipe 的方法也是使用 (ngModelChange)。

这可能会有很大的用处：

Using Pipes within ngModel on INPUT Elements in Angular2-View

【讨论】：

我在应用管道伴侣时收到模板错误。这就是我问的原因。

2 路数据绑定中不允许使用管道。

请问pipes are not allowed in 2-way data-binding哪里有提到？ @n00dl3

@n00dl3 是允许的。在action expression 中不允许，但如果我们只是将[(ngModel)] 更改为[ngModel]，它可以让我们应用@Pipe。

@n00dl3 你很好地指出了这一点。我的第一个答案不正确也不准确，谢谢！ :)

【参考方案2】：

试试这个

<input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number" (keyup)='conversion()'>

conversion()
  this.minimumRange = this.minimumRangex.toPrecision(2);

【讨论】：

@n00dl3，请查看管道评论。谢谢。

这个问题是我需要知道如何将它放入组件中。我不能在 html 中放置脚本..

@Padeep Jain，this.minimumRangex 来自哪里？谢谢

我认为应该是错字，应该有this.minimumRange

【参考方案3】：

  private _minimumRange:number;

  get minimumRange():number
    return this._minimumRange;
  

  set minimumRange(num:number)
    this._minimumRange = num.toPrecision(2);
  

      <input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number">