如何显示与ngModel不同的输入值
如何显示与ngModel不同的输入值
提问于 2018-10-18 06:19:55
我有一个这样的输入字段：<input myCurrencyFormatter type="text" [(ngModel)]="value" name="value">
输入值应格式化为数字，如:1 024，50(此值应仅对输入可见)，但ngModel中的值应保持非格式:1024.05(点而不是逗号)。我该怎么做呢？这是我的指令和管道：https://stackblitz.com/edit/angular-6smqvf?file=src%2Fapp%2Fapp.component.html，我不知道如何输入逗号并保存到模型点。
回答 3
Stack Overflow用户
发布于 2021-12-08 20:53:06
这可以通过重新定义getter和setter来实现，如下所示：
<input type="text" [(ngModel)]="displayValue" >在TS端：
get displayValue(){ return this.realValue + '$' ; }
set displayValue(v){ this.realValue = v?.replace('$',''); }Stack Overflow用户
发布于 2018-10-18 06:54:11
可能有几种方法。一种解决方案是使用将转换后的输入保存到的自定义属性。使用(change)监听输入更改，并在那里进行转换。下面是一个例子：
在模板中：
<form (ngSubmit)="test(value)">
<input myCurrencyFormatter type="text" [ngModel]="value"
(change)="storeMyValue($event)"
name="value">
<button type="submit">Wtślij</button>
</form>
Custom value: {{ myCustomValue }}在组件中：
myCustomValue: string;
public storeMyValue(event) {
// the following replacements are not very sophisticated, but they
// show the idea
this.myCustomValue = event.target.value.trim().replace(/\s+/g, '').replace(",",".");
}如果您想要重用它，您可能需要考虑为这种情况编写一个自定义组件。
Stack Overflow用户
发布于 2021-06-22 01:51:17
OnFocus删除分隔符并在焦点输出时将其恢复
@HostListener('focus')
onFocus() {
let element = this.el.nativeElement;
// Remove separator
element.value = element.value.toString().replace(this.separator, '');
}
@HostListener('focusout')
onFocusLost() {
let element = this.el.nativeElement;
// Add separator
if (+element.value > 999) {
element.value = element.value.replace('/^\d+/g', '').replace(/\B(?=(\d{3})+(?!\d))/g, this.separator);
}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52864412
复制相关文章
相似问题