web-dev-qa-db-ja.com

Angular 2にフォーム検証パターンを追加する方法は？

入力の開始と終了がスペースでない場合に検証する必要がある単純なフォームがあります。

HTML5では、これを行います。

<input type="text" pattern="^(?!\s|.*\s$).*$">

新しいAngular 2 ngControlディレクティブの検証パターンに適切なプロパティは何ですか？公式のベータAPIには、この問題に関するドキュメントがまだありません。

validationangularangular2-forms
38
Downhillski

これで、FormBuilderとこの複雑な検証angularを使用する必要がなくなりました。私はこれから詳細を入力します（Angular 2.0.8-3march2016）： 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年6月更新）

検証はサーバー側でのみ行われます。何かが間違っている場合、サーバーはエラーコードを返します HTTP 4 および応答本文に次のjsonオブジェクト（例として）：

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>

「容量」にエラーがある場合、メッセージ翻訳のタグが表示されます。このアプローチには次の利点があります。

  • とても簡単です
  • フロントエンドでのバックエンド検証コードの重複を回避します（正規表現の検証では、これにより ReDoS 攻撃を防止または複雑化できます）
  • エラーの表示方法を制御します（例：<small>タグ）
  • バックエンドreturnerror_nameこれはフロントエンドで適切な言語に簡単に翻訳できます

もちろん、フロントエンド側で検証が必要な場合は例外を作成することがあります（たとえば、登録時のretypePasswordフィールドはサーバーに送信されません）。

49
Kamil Kiełczewski

バージョン2.0.0-beta.8（2016-03-02）以降、Angularに Validators.pattern regexバリデーターが含まれるようになりました。

CHANGELOG を参照してください

11
Chris Snowden

FormBuilderを使用すると、フォームをより柔軟に構成できるため、フォームを構築できます。

export class MyComp {
  form: ControlGroup;

  constructor(@Inject()fb: FormBuilder) {  
    this.form = fb.group({  
      foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)]  
    });  
  }

次に、テンプレートで：

<input type="text" ngControl="foo" />
<div *ngIf="!form.foo.valid">Please correct foo entry !</div>

Ng-invalid CSSクラスをカスタマイズすることもできます。

正規表現のバリデーターは実際にはないので、独自に作成する必要があります。入力のコントロールを取得し、有効な場合はnullを返し、無効な場合はStringMapを返す単純な関数です。

export class MyValidators {
  static regex(pattern: string): Function {
    return (control: Control): {[key: string]: any} => {
      return control.value.match(pattern) ? null : {pattern: true};
    };
  }
}

それがあなたを助けることを願っています。

8
gentiane

stepによるカスタム検証ステップ

HTMLテンプレート

  <form [ngFormModel]="demoForm">
  <input  
  name="NotAllowSpecialCharacters"    
  type="text"                      
  #demo="ngForm"
  [ngFormControl] ="demoForm.controls['spec']"
  >

 <div class='error' *ngIf="demo.control.touched">
   <div *ngIf="demo.control.hasError('required')"> field  is required.</div>
   <div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div>
 </div>
  </form>

コンポーネントApp.ts

import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common';
import {CustomValidator} from '../../yourServices/validatorService';

クラス定義の下で

 demoForm: ControlGroup;
constructor( @Inject(FormBuilder) private Fb: FormBuilder ) {
    this.demoForm = Fb.group({
       spec: new Control('', Validators.compose([Validators.required,   CustomValidator.specialCharValidator])),
      })
}

{../../ yourServices/validatorService.ts}の下

export class CustomValidator {
    static specialCharValidator(control: Control): { [key: string]: any } {
   if (control.value) {
       if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) {            
           return null;
       }
       else {            
           return { 'invalidChar': true };
       }
   }

 }

 }
5
mani R

Angular 4.0.1を使用した私のソリューション：必要なCVC入力のUIを表示するだけです-CVCは正確に3桁でなければなりません：

    <form #paymentCardForm="ngForm">         
...
        <md-input-container align="start">
            <input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required />
            <md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result">
                <span [hidden]="!cvc2.errors.required && cvc2.dirty">
                    CVC is required.
                </span>
                <span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern">
                    CVC must be 3 numbers.
                </span>
            </md-hint>
        </md-input-container>
...
<button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button>
</form>
1
mkaj