ngx-mask 货币输入不允许负值

Question

我需要屏蔽负值类型，并且不允许输入超过 99,999,999.99 的数字。

这是我用于货币输入的代码。

<input mask="separator.2" thousandSeparator="," placeholder="Currency">

任何帮助将不胜感激。

这里还有 Stackblitz 示例。

https://stackblitz.com/edit/ngx-mask-currency-input?file=src/app/app.component.html

更新

我找到了问题第二部分的答案。现在输入看起来像这样

<input mask="separator.2" thousandSeparator="," separatorLimit="10000000"  placeholder="Currency">

现在只需要屏蔽-个字符的类型

Answer 1

Demo 你可以用 keypress 事件解决

<input (paste)="onPaste($event)" mask="separator.2" thousandSeparator=","  separatorLimit="10000000" [allowNegativeNumbers]="false" placeholder="Currency" class="form-control" (keypress)="isPositive($event)">

在组件中

  isPositive(event: any) { return event.key === '-' ? false : true; }

和块粘贴

 onPaste(event){
    event.preventDefault();
  }

Answer 2

更新于 08.02.2021

目前，allowNegativeNumbers正在工作。 (ngx-mask 版本为 11.1.4)

输入看起来像这样

<input 
   mask="separator.2" 
   thousandSeparator="," 
   separatorLimit="10000000"  
   [allowNegativeNumbers]="false"
   placeholder="Currency">

更新于 2020 年 9 月 1 日

我创建了用于阻止负值 (-) 值类型的指令。

这是指令示例。

import { Directive, ElementRef, OnInit, OnDestroy } from "@angular/core";
import { fromEvent } from "rxjs/internal/observable/fromEvent";
import { Subscription } from "rxjs";

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: "[onlyPositive]"
})
export class OnlyPositiveDirective implements OnInit, OnDestroy {
  subscriber$: Subscription;

  constructor(private element: ElementRef<HTMLInputElement>) {}

  ngOnInit() {
    const input = this.element.nativeElement;
    this.subscriber$ = fromEvent(input, 'input').subscribe(
      (event: KeyboardEvent) => {
        if (input.value.includes('-')) {
          input.value = input.value.replace(/-/g, '');
        }
      }
    );
  }

  ngOnDestroy() {
    this.subscriber$.unsubscribe();
  }
}

用法示例

<input onlyPositive mask="separator.2" thousandSeparator="," separatorLimit="99999999" [allowNegativeNumbers]="false" placeholder="Currency">

在 Adams 建议后，我已将 keypress 事件更改为 input 事件

演示： https://stackblitz.com/edit/ngx-mask-currency-input?file=src/app/app.component.html

ngx-mask 货币输入不允许负值

ngx-mask Do not allow negative value for the currency input

angular

ngx-mask