Angular应用程序中依赖于区域设置的regexp(小数点的点或昏迷)

时间:2017-06-16 08:20:41

标签: javascript angular primeng

我有Angular 2 + PrimeNG应用程序,它使用正则表达式来表示浮点数:

<input pInputText pattern="[0-9]*\.[0-9]" [(ngModel)]="someModel"/>

它适用于美国语言环境,但是有些国家/地区使用昏迷来表示小数,因此模式不适合它们。

目前我正在考虑在组件代码中检索分隔符并在那里动态构建正则表达式。

问:如何处理依赖于区域设置的regexp以及执行此操作的最佳/规范方法是什么?

注意:我需要此功能仅适用于Chrome,我只需要考虑浏览器区域设置。我正在使用browser-locale 1.0.2作为输出。

2 个答案:

答案 0 :(得分:1)

对于绊倒这篇文章的任何人,这是我的解决方案:

您可以通过注入LOCALE_ID来获取语言环境。 基于此,您可以使用

getLocaleNumberSymbol(locale: string, symbol: NumberSymbol): string

来自@ angular / common(doku

以此,我创建了一个本地化我的模式的服务。这些模式存储在枚举ValidationExpression中。

服务:

import { getLocaleNumberSymbol, NumberSymbol } from "@angular/common";
import { Inject, Injectable, LOCALE_ID } from "@angular/core";
import { ValidationExpression } from "./validation-expression.enum";
...
constructor(@Inject(LOCALE_ID) private _locale: string) {
}

public getLocalizedPattern(expression: ValidationExpression): string {
    const separator = getLocaleNumberSymbol(this._locale, NumberSymbol.Decimal);
    return expression.replace("delimiter", "\\" + separator);
}

模式枚举:

export enum ValidationExpression {
   decimal = "^(\\-|\\+)?([0-9]+((delimiter)[0-9]+)?)$",
   decimalPos = "^[+]?([1-9][0-9]*(?:[delimiter][0-9]*)?|0*[delimiter]0*[1-9][0-9]*)$",
   decimalPosWithZero = "^(\\+)?([0-9]+((delimiter)[0-9]+)?)$",
   int = "^(\\-|\\+)?[0-9]+$",
   intPos = "^\\+?[1-9]\\d*$",
   intPosWithZero = "^\\+?[0-9]\\d*$"
}

请注意,我的模式不包含千位分隔符(1,234.56)

答案 1 :(得分:0)

此正则表达式将使用逗号或点

匹配字符串
[0-9]*'[\.,][0-9]

https://regex101.com/r/hFnzW0/1

如果您想根据用户定义的区域设置匹配点或逗号,请使用[0-9]*'[\.][0-9]匹配点,[0-9]*'[,][0-9]匹配逗号

修改

我发现了这个:

<label for="regex">Set a pattern (regex string): </label>
<input type="text" ng-model="regex" id="regex" />

<label for="input">This input is restricted by the current pattern: </label>
<input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" /><br>

使用此功能,您可以根据#regex中的区域设置定义正则表达式,并将其用于其他200个输入。这样您只需定义一次。