<input matInput ... (Angular material form) input上允许3个小数点,但只显示2个小数点 [英] <input matInput ... (Angular material form) Allow 3 decimal points on input, but only display 2 decimal points
问题描述
我有一个常规的有角材质表单,它使用 numberMaskOptions 将字段值的输入和显示限制为 3 个小数点.(见下面的代码)
这很好,但客户现在想将字段的显示"限制为仅显示 2 个小数点,但希望允许用户在同一字段中输入最多 3 个小数点.
也就是说,当光标不在该字段中时,它应该显示2个小数点的精度,但是当用户进入该字段进行编辑时,它应该允许3个小数点的精度.
这对材料 matInput 字段是否可行?如果是这样怎么办?如果没有,我还应该如何处理?
<mat-form-field myAppTooltip><mat-label>昆虫体型</mat-label><输入自动完成=关闭"应用号码掩码formControlName="InsectBodySizeSmm"垫输入最大=99999"分钟=0"[numberMaskOptions]="threeDecPrecisionDecimalMaskOptions"/><mat-error></mat-error></mat-form-field>
带着我的面具
threeDecPrecisionDecimalMaskOptions = {对齐:'正确',允许负:假,十进制分隔符:'.',精度:3,字首: '',后缀: '',千位分隔符:'',值模式:'标准',};
这使我可以在字段表单中输入和查看 3 位小数点的值.
前段时间我做了一个atribute指令来做一些类似的,你可以在这个链接,不知道你能不能用,因为你也有屏蔽号码的指令.
代码如下:
@Directive({ 选择器:[decimal2]"})导出类 Decimal2 实现 OnInit {私人 el: HTMLInputElement;私人价值:任何;构造函数(私有元素引用:元素引用){this.el = this.elementRef.nativeElement;}@HostListener("focus", ["$event.target.value"])焦点(){this.el.value = this.value;}@HostListener("blur", ["$event.target.value"])onBlur(值:任何){this.transform(value);}ngOnInit() {this.transform(this.el.value);}变换(值:任何){this.value = 值;如果(值&& !isNaN(值)){const aux ="+ Math.round(+this.value * 100);this.el.value = aux.slice(0, -2) + ."+ 辅助切片(-2);如果 (this.el.value.indexOf(this.value) >= 0) this.value = this.el.value;}}}
更新我们可以使用转换函数中的角格式数来改进我们的指令
变换(值:任意){this.value = 值;如果(值&& !isNaN(值)){this.el.value=formatNumber(+this.value, en-US", '1.2-2');const formated=this.el.value.split(',').join('')if (formated.indexOf(this.value) >= 0) this.value = formated;}}
I have a regular angular material form that uses numberMaskOptions to limit the input and display of the field value to 3 decimal points. (see code below)
This is fine, but the customer now wants to limit the "display" of the field to show just 2 decimal points, but wants to allow the user to enter up 3 decimal points in the same field.
In other words, when the cursor is not in the field, it should display 2 decimal points of accuracy, but when the user enters the field to edit it, it should allow 3 decimal points of accuracy.
Is this possible with material matInput fields? If so how? If not, how else should I approach this?
<div *ngIf="isFieldVisible">
<mat-form-field myAppTooltip>
<mat-label>Insect Body Size</mat-label>
<input
autocomplete="off"
appNumberMask
formControlName="InsectBodySizeSmm"
matInput
max="99999"
min="0"
[numberMaskOptions]="threeDecPrecisionDecimalMaskOptions"
/>
<mat-error></mat-error>
</mat-form-field>
</div>
with my mask being
threeDecPrecisionDecimalMaskOptions = {
align: 'right',
allowNegative: false,
decimalSeparator: '.',
precision: 3,
prefix: '',
suffix: '',
thousandsSeparator: '',
valueMode: 'standard',
};
That allows me to input and view values in the field form to 3 decimal points.
Some time ago I make a atribute directive to make some similar, you can see in this link, I don't know if you can use because you has also a directive to mask the number.
The code is as is:
@Directive({ selector: "[decimal2]" })
export class Decimal2 implements OnInit {
private el: HTMLInputElement;
private value: any;
constructor(private elementRef: ElementRef) {
this.el = this.elementRef.nativeElement;
}
@HostListener("focus", ["$event.target.value"])
onFocus() {
this.el.value = this.value;
}
@HostListener("blur", ["$event.target.value"])
onBlur(value: any) {
this.transform(value);
}
ngOnInit() {
this.transform(this.el.value);
}
transform(value: any) {
this.value = value;
if (value && !isNaN(value)) {
const aux = "" + Math.round(+this.value * 100);
this.el.value = aux.slice(0, -2) + "." + aux.slice(-2);
if (this.el.value.indexOf(this.value) >= 0) this.value = this.el.value;
}
}
}
Updated we can inprove our directive using the angular formatNumber in the transform function
transform(value: any) {
this.value = value;
if (value && !isNaN(value)) {
this.el.value=formatNumber(+this.value, "en-US", '1.2-2');
const formated=this.el.value.split(',').join('')
if (formated.indexOf(this.value) >= 0) this.value = formated;
}
}
这篇关于<input matInput ... (Angular material form) input上允许3个小数点,但只显示2个小数点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!