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

【问题标题】：Allow only one decimal on input in Angular2在Angular2中只允许输入一位小数
【发布时间】：2017-08-30 16:59:27
【问题描述】：

这是我的输入：

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

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

“1”

，我需要它返回

“1.0”。

关于模糊这怎么可能？

【问题讨论】：

使用@Pipe。例如：stackoverflow.com/questions/38456114/…
@SrAxi，请发布示例，谢谢。
minimumRange的类型是字符串还是数字？
minimumRange的类型是：数字
您需要输出 1.0 是因为样式或服务器上的某些处理或其他需要小数点后 1 位的数字吗？因为"1.0"的数字表示是1...

标签： javascript jquery html angular

【解决方案1】：

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

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

更多信息：

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

更新：

如果我们像这样在模型中使用@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);
  }

      &lt;input [(ngModel)]="minimumRange" min="1" placeholder="0.0" step="0.1" type="number"&gt;

【讨论】：