8

私は現在、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>

最大長、最小長、および必要な長さが取得されています (条件が満たされない場合、ボタンは無効になります)。ここで、入力を数値に制限し、その前に 06 (最小量の数字を持つオランダの電話番号) を付けたいと考えています。

ただし、パターンは検証で取り上げられません。この方法で実行できますか、それともコード アプローチが必要ですか?

4

2 に答える 2

8

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

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 に静的に (バインディングなしで) 追加する必要があります。

于 2016-01-25T12:51:29.530 に答える
7

詳細を追加します (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 400などのエラーコードを返し、応答本文で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>

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

  • それはとても簡単です
  • angularでは、サーバーにある（そしてそうでなければならない）検証コードを2倍にしません（正規表現検証の場合、これはReDoS攻撃を防止または複雑にする可能性があります）
  • エラーがユーザーに表示される方法を完全に制御できます（ここでは<small>タグ内のegzampleとして）
  • サーバーの応答では、(直接のエラー メッセージではなく) error_nameを返すため、フロントエンドの角度コード (または翻訳を含むファイル) のみを変更することで、エラー メッセージを簡単に変更 (または翻訳) できます。その場合、バックエンド/サーバー コードに触れる必要はありません。

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

于 2016-03-10T19:39:57.960 に答える