在Angular2中仅允许输入一个小数

Question

这是我的意见：

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

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

“1”

，我需要它回来

“1.0”。

on blur这怎么可能？

Answer 1

使用数字 @Pipe你应该能够实现这一目标。

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

UPDATE2：

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

正如@ n​​00dle指出的那样，删除()会删除双向绑定功能。 因此，在双向@Pipe中使用@Pipe的方法也是使用(ngModelChange) 。

这可能是一个巨大的用途：

• 在Angular2-View中的INPUT元素上使用ngModel中的管道

Answer 2

尝试这个

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

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

Answer 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">