我有一个规则的角度材质表单,它使用numberMaskOptions将字段值的输入和显示限制为3个小数点。(见下面的代码)
这很好,但客户现在希望限制字段的“显示”仅显示2个小数点,但希望允许用户在同一字段中最多输入3个小数点。
换句话说,当光标不在字段中时,应显示2个精度小数点,但当用户进入字段进行编辑时,应允许3个精度小数点。
这是可能的材料输入字段?如果是怎样?如果没有,我还应该怎么做?
<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个小数点。
前一段时间我做了一个类似的阿曲布他指令,你可以在这个链接中看到,我不知道你是否可以使用,因为你也有一个指令来屏蔽数字。
代码如下:
@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;
}
}