< input matInput ...(角形物料形式)输入上允许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字段可能吗?如果可以,怎么办?如果没有,我该如何处理?
<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>
戴上口罩
threeDecPrecisionDecimalMaskOptions = {
align: 'right',
allowNegative: false,
decimalSeparator: '.',
precision: 3,
prefix: '',
suffix: '',
thousandsSeparator: '',
valueMode: 'standard',
};
这使我可以在字段形式中输入和查看3个小数点的值.
前段时间,我做出了一个atribute指令来进行类似的修改,您可以在
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? with my mask being 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: Updated we can inprove our directive using the angular formatNumber in the transform function
这篇关于< input matInput ...(角形物料形式)输入上允许3个小数点,但仅显示2个小数点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! <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>
threeDecPrecisionDecimalMaskOptions = {
align: 'right',
allowNegative: false,
decimalSeparator: '.',
precision: 3,
prefix: '',
suffix: '',
thousandsSeparator: '',
valueMode: 'standard',
};
@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;
}
}
}
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;
}
}