只允许一个输入小数在Angular2

这是我输入：只允许一个输入小数在Angular2

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

我需要的是，当有人进入

"1"

，我需要它返回

"1.0".

模糊这怎么可能？

来源

2017-04-05 eric.dummy

使用'@ Pipe'。例如：http://stackoverflow.com/questions/38456114/angular-2-pipe-limit-to-2-decimal-places – SrAxi

@SrAxi，请张贴一个例子，谢谢。 –

是'minimumRange'类型的字符串还是数字？ – n00dl3

使用数@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">

它会抛出以下错误：

Parser Error: Cannot have a pipe in an action expression at column X

我们只需要改变它对此：

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

UPDATE2：

新增(ngModelChange)="minimumRange=$event"保持双向绑定功能。

正如@ n00dle指出的那样，删除()将删除2路绑定功能。因此，在双向绑定中使用@Pipe的方法也将使用(ngModelChange)。

这可能是巨大的使用：

Using Pipes within ngModel on INPUT Elements in Angular2-View

来源

2017-04-05 08:24:23 SrAxi

我在应用管道队友时收到模板错误..这就是为什么我问。 –

管道不允许进行双向数据绑定。 – n00dl3

我可以知道它在哪里提到'管道不允许在双向数据绑定？ @ n00dl3 –

试试这个

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

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

来源

2017-04-05 07:56:38

@ n00dl3，请参阅管道注释。谢谢。 –

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

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

来源

2017-04-05 08:36:15 aalielfeky

只允许一个输入小数在Angular2

回答

相关问题