ngx-mask 接受负数答案

【问题标题】：ngx-mask to accept negative numbersngx-mask 接受负数
【发布时间】：2018-08-27 13:31:30
【问题描述】：

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

以下是我的指令。我正在使用输入类型 =“十进制”。现在我有一个场景，其中该指令应该接受一个负数（如果有的话）。

我该如何实现呢？尝试使用“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">`

【问题讨论】：

标签： angular

【解决方案1】：

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

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

Reference

【讨论】：

【解决方案2】：

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

（使用https://www.npmjs.com/package/ngx-mask12.0.0）

我尝试使用掩码和模式来完成此操作，但由于我认为这是 ngx-mask 代码中的错误而仍然失败。

尝试：

正则表达式可选“？”移动到掩码，否则任何字符都可以作为第一个字符输入。
再加上 0 否则不起作用。请参阅下面的更多详细信息。
使用 '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-mask 代码后：

缺少文档或存在需要可选字符“？”的错误在面具中，如果不是那样，它会是什么。我认为下面的光标应该是 += 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]="''">

【讨论】：