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