在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绑定中使用的方式也将使用(ngModelChange).

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

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