web-dev-qa-db-ja.com

パターンを使用した入力検証Angular 2

現在、ionic 2（Angular 2））で単純なフォームを書いています。検証に単純な 正規表現 パターンをどのように追加するのか疑問に思っていました。

私は基本的にこれを持っています：

<form>
    <ion-input stacked-label>
        <ion-label>{{label.msisdn}}</ion-label>
        <input type="text"
               [(ngModel)]="msisdn"
               ngControl="msisdnForm"
               required
               maxlength="10"
               minlength="10"
               pattern="06([0-9]{8})"
               #msisdnForm="ngForm"
        >
    </ion-input>
    <button [disabled]="!msisdnForm.valid" block (click)="requestActivationCode()">
        {{label.requestActivationCode}}
    </button>
</form>

Maxlength、minlength、requiredが選択されています（条件が満たされない場合、ボタンは無効になります）。ここで、入力を数値に制限し、先頭に06（最小数のオランダ電話番号）を付けます。

ただし、検証ではパターンは選択されません。このようにすることはできますか、それともコードアプローチが必要ですか？

regexhtml5angularvalidationionic2
8
Mathijs Segers

パターンを変数に追加する

var pattern=/06([0-9]{8})/;

属性をバインドします

 <input type="text"
               [(ngModel)]="msisdn"
               ngControl="msisdnForm"
               required
               maxlength="10"
               minlength="10"
               [pattern]="pattern"
               #msisdnForm="ngForm"
        >

このPRのようです https://github.com/angular/angular/pull/6623/files 最初に着陸する必要があります。

未解決の問題がまだあります https://github.com/angular/angular/issues/7595 これにより、patternがバインドされなくなります。パターンを機能させるには、（バインディングなしで）DOMに静的に追加する必要があります。

8
Günter Zöchbauer

詳細を入力します（Angular 2.0.8-2016年3月3日）： https://github.com/angular/angular/commit/38cb526

リポジトリからの例：

<input [ngControl]="fullName" pattern="[a-zA-Z ]*">

私はそれをテストし、それは働いた:)-ここに私のコードがあります：

<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm'  >
...
<input
  id='room-capacity'
  type="text"
  class="form-control"
  [(ngModel)]='room.capacity'
  ngControl="capacity"
  required
  pattern="[0-9]+"
  #capacity='ngForm'>

2017年9月更新

私は現在、より多くの経験があるときに、通常、データ検証に以下の「安い」アプローチを使用すると言いたいだけです：

検証はサーバー側のみ（angularではない！）であり、何か問題がある場合、サーバー（Restful API）はエラーコードを返します HTTP 4 以降応答本体のjsonオブジェクト（angular私はerr変数に入れます）：

this.err = { 
    "capacity" : "too_small"
    "filed_name" : "error_name", 
    "field2_name" : "other_error_name",
    ... 
}

（サーバーが異なる形式で検証エラーを返す場合、通常は簡単に上記の構造にマッピングできます）

HTMLテンプレートでは、個別のタグ（div/span/smallなど）を使用します

<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>

ご覧のとおり、「容量」にエラーがある場合、エラー翻訳（ユーザー言語への）のタグが表示されます。このアプローチには次の利点があります。

  • とても簡単です
  • in angularサーバーに存在する（存在しなければならない）検証コードを二重にすることはありません（正規表現検証の場合、これは防止または複雑になります ReDoS 攻撃）
  • エラーがユーザーに表示される方法を完全に制御できます（ここでは<small> 鬼ごっこ）
  • サーバーの応答ではerror_nameを返すため（直接的なエラーメッセージの代わりに）、frontend-angularのみを変更することにより、エラーメッセージを簡単に変更（または翻訳）できます。コード（または翻訳されたファイル）。そのため、その場合、バックエンド/サーバーコードに触れる必要はありません。

もちろん、これが必要な場合（サーバーに送信されないretypePasswordフィールドなど）時々、上記のアプローチの例外を作成し、angular（ただし、同様の "this.err "エラーを表示するメカニズム（したがって、patternタグでinput属性を直接使用せず、ユーザーが入力変更や保存などの適切なイベントを発生させた後、一部のコンポーネントメソッドで正規表現検証を行います） 。

7
Kamil Kiełczewski