Angular 5 Validators.pattern regex for only numbers

ego6inou  于 2023-05-30  发布在  Angular
关注(0)|答案(6)|浏览(144)

我无法让Angular 5 Validators.模式正常工作。我已经尝试了每一个正常工作的正则表达式,但它不工作。我读到Validators.pattern需要不同的格式,但我似乎找不到它...
有什么想法Validators.pattern应该是什么
(1)只允许数字,正负

(2)仅允许数字,正负,最多可选择2位小数
有效的例子如下:1 1.2 1.22 -21 -21.48
任何有字母的东西都是无效的。
谢谢你的帮助!

imzjd6km

imzjd6km1#

在尝试了这么多正则表达式之后,没有一个在Safari中工作。所以我就这么做了...
首先,我在创建表单控件时使用了正则表达式:

new FormControl({value: field.value}, [Validators.required, Validators.pattern(/^-?(0|[1-9]\d*)?$/)])

然后,在input本身中添加了一个(input)事件:

<input matInput (input)="validateInput(field)" [placeholder]="field.label" type="number" [formControlName]="field.id" [id]="field.id">

这个函数看起来像这样:

validateInput(field) {

    this.detailForm.patchValue({ [field.id]: this.detailForm.controls[field.id].value }); }

}

如果输入无效字符(例如a-z),它不会将其存储在字段控件的值中。它只存储有效值(数字)。所以我只是用存储的值来修补这个值--如果它是有效的,用数字,就没问题;如果无效,用其他字符,那么它将用空字符串替换输入。
在所有浏览器上都能完美运行。希望这对某人有帮助:)

kxkpmulp

kxkpmulp2#

只允许不带符号的整数。

Validators.pattern(/^[0-9]\d*$/)

数字从一开始

Validators.min(1)
dsekswqp

dsekswqp3#

不要忘记使用引号和双反斜杠,以使您的正则表达式像Validators.pattern('\\-?\\d*\\.?\\d{1,2}')一样工作,或者您可以为此创建变量

const regexPattern = /\-?\d*\.?\d{1,2}/;
Validators.pattern(regexPattern);
yhqotfr8

yhqotfr84#

这个在昂古拉7号为我工作

const numericNumberReg= '^-?[0-9]\\d*(\\.\\d{1,2})?$';

this.$form = this.$builder.group({
      cost: ['', [Validators.required,Validators.pattern(numericNumberReg)]],
    });
ruoxqz4g

ruoxqz4g5#

你可以试试这个正则表达式'^-?[0-9]\d*(.\d{1,2})?$'。您的表单生成器将如下所示:

this.yourForm= this.formBuilder.group({
    amount: [this.amount, [Validators.required, Validators.pattern('^-?[0-9]\\d*(\\.\\d{1,2})?$')]]
});
y4ekin9u

y4ekin9u6#

我在fromControl上使用了valueChanges属性来过滤掉任何非数字字符并更新它自己的值,这似乎是一个可靠的(如果过度设计的话)解决方案,并避免了在字段上使用单独的input。但完全归功于@Matt的原则。
这与内置的Validators.minValidators.max兼容,但HTML中的字段必须是type="text"而不是type="number",否则会出现一些奇怪的行为。

myNumberField = new FormControl<number | null>(null);

myNumberFieldSub = this.myNumberField.valueChanges.subscribe(value => {
  let filteredValue = null;
  if (!!value) {
    filteredValue = parseInt(value.toString().replace(/[^0-9]*/, ''));
    if (isNaN(filteredValue)) {
      // Set field back to null if filtered value is not a number
      filteredValue = null;
    }
  }
  this.myNumberField.setValue(filteredValue, { emitEvent: false });
});

别忘了取消订阅!!

相关问题