web-dev-qa-db-ja.com

Angular 5数値のみのValidators.pattern regex

Angular 5 Validators.patternを機能させるのに問題があります。通常は機能するはずのすべての正規表現を試しましたが、機能しません。Validators.patternには別の形式が必要であることを読みました、でも見つけられないようです...

Validators.patternがどうあるべきかについてのアイデア

（1）正と負の数値のみを許可する

そして

（2）オプションで小数点以下2桁までの正と負の数値のみを許可します

有効な例は次のとおりです。11.2 1.22 -21 -21.48

文字が含まれているものはすべて無効です。

ご協力いただきありがとうございます！

regexangularangular5
7
Matt

非常に多くの正規表現を試した後、誰もSafariで働いていませんでした。これが私がしたことです...

まず、フォームコントロールを作成するときに正規表現を使用しました。

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

次に、入力自体に（入力）イベントを追加しました。

<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 }); }

}

Safariに無効な文字（例：a-z）を入力しても、フィールドコントロールの値には格納されません。そこには有効な値（数値）のみが格納されます。つまり、保存されている値で値にパッチを適用しているだけです。それが有効で、数値を使用している場合は問題ありません。他の文字で無効な場合は、入力を空の文字列に置き換えます。

すべてのブラウザで完全に動作します。これが誰かを助けることを願っています:)

18
Matt

正規表現をValidators.pattern('\\-?\\d*\\.?\\d{1,2}')のように機能させるには、引用符と二重のバックスラッシュを使用することを忘れないでください。そうしないと、変数を作成できます

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

これは私にとってAngular 7で機能します

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

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

この正規表現 '^-？[0-9]\d *（\。\ d {1,2}）？$'で試すことができます。そしてあなたのフォームビルダーは以下のようになります：

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

記号なしの整数のみを許可します。

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

番号は1から始まります

Validators.min(1)
0
Andriy Danylko