ngx-掩码以接受负数

Question

我们正在使用来自ngx-mask的MaskDirective & MaskService，以使用户接受以下格式的输入货币: 000000.00。

以下是我的指令。我使用输入type="decimal“。现在我有一个场景，其中有一种情况，这个指令应该接受一个负数(如果有)。

我如何实现这一点？我试着用"specialCharacters“，但是我打不通。

任何帮助都是非常感谢的。提前谢谢。

`@Directive({
  selector: 'input[type=decimal]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DecimalDirective),
      multi: true,
    },
    MaskService,
  ],
})
export class DecimalDirective extends MaskDirective implements OnInit {
  @HostBinding('type') public type = 'text';

  ngOnInit() {
    this.maskExpression = '099999.00';
    this.dropSpecialCharacters = false;
  }
}`

用法：

`<input type="decimal" name="sampleAmount" formControlName="sampleAmount" class="form-control" placeholder="0.00">`

Answer 1

<input mask="V0*.00" 
      [patterns]="customPatterns" 
      [dropSpecialCharacters]="false">

customPatterns = {
    'V': {pattern: new RegExp('-?')},
    '0': {pattern: new RegExp('[0-9]')}
  }

Reference

Answer 2

基于@AnisNoorAlis答案和https://github.com/JsDaddy/ngx-mask/issues/175。

(使用https://www.npmjs.com/package/ngx-mask 12.0.0)

我试图使用掩码和模式来完成这个任务，但仍然失败了，因为我认为这是ngx-mask代码中的一个bug。

尝试：

1. 可选的正则表达式'?‘移到掩码中，否则任何字符都可以作为第一个字符输入。

为

1. ，否则为0，否则不起作用。请参阅下面的更多详细信息。
2. 使用“9”而不是“V”或任何字母(这只是因为格式化程序删除了字符的“”，然后它不喜欢它...

mask(){
    float ? "9?00*.00" : "9?00*";
}

customPatterns = {
    '9': {pattern: new RegExp('-')},
    '0': {pattern: new RegExp('[0-9]')}
}

<input [mask]=mask() [patterns]="customPatterns" [dropSpecialCharacters]="false">

但这不允许输入一位小数，即9.3、1.12。如此接近但仍然是不可接受的。

在深入研究ngx掩码代码之后：

缺少文档或需要可选字符'?‘的错误如果不是这样，它会是什么样子的。我认为下面的光标应该是+= 2。但是在掩码中添加额外的0是有效的。有问题的代码在applyMask中。

else if (maskExpression[cursor + 1] === '?' &&
         this._checkSymbolMask(inputSymbol, maskExpression[cursor + 2])) {
    result += inputSymbol;
    cursor += 3;
}

此外，allowNegativeNumbers仅在掩码以“百分比”或“分隔符”开头时才起作用。

我想知道发生了什么，但有一个替代的解决方案:使用“分隔符”掩码并将分隔符设置为“”。使用这种方法无法限制小数点前的位数；'separatorLimit‘表示可以这样做，但它不这样做。我真的不太理解它的文档。

mask(){
    float ? "separator.4" : "separator.0";
}

<input [mask]="mask()" [thousandSeparator]="''">