我有一个这样的输入字段:<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,我不知道如何输入逗号并保存到模型点。
发布于 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('$',''); }
发布于 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(",",".");
}
如果您想要重用它,您可能需要考虑为这种情况编写一个自定义组件。
发布于 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);
}
}
https://stackoverflow.com/questions/52864412
复制相似问题