2016-06-16 15 views
3

Dateの検証パターンをangle2 Validator.patternを使用してDD/MM/YYYY形式で追加する方法。angle2を使用するDD/MM/YYYY形式の日付の検証パターン

私は "必須"バリデーターを用意しています。日付パターンのパターンが見つかりません。以下のコード:

this.txtDob = new Control("", Validators.compose([Validators.required])); 

答えて

3

日付バリデーターはありません。あなたは1つのhttp://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

あなたのバリデータはこのhttps://github.com/Angular2Buch/angular2-forms/blob/master/src/app/validators/date.validator.ts

更新のようになります。カスタムを作成する必要があります。 あなたはバリデータのクラスを持っている必要があります。 Validators.composeの配列の2番目の要素として、それを指定します。

Validators.compose([Validators.required, MyValidator]) 

パターンがあまりにも動作することがあります。How to add form validation pattern in angular2

+0

Validators.patternでは "/^¥d{1,2}\.\d{1,2}\.\d{4}$/"が追加されますか? Like: Validators.pattern( '/^\ d {1,2} \。\ d {1,2} \。\ d {4} $ /') – Prashanth

+0

回答が更新されました –

0

(以下、簡単に通常の関数に変更することができ、つまり、必須ではありません)また、サービスを作成することができます次のように:

import { Injectable } from '@angular/core'; 
import { FormControl } from '@angular/forms'; 

    interface Validator<T extends FormControl> { 
     (c: T): { [error: string]: any }; 
    } 

    @Injectable() 
    export class DateValidatorClass { 

     constructor() { } 
     dateValidator(c: FormControl) { 

     const dateRegEx = new RegExp(yourRegExInHere);; 

     return c.value.test(dateRegEx) ? null : { 
      dateValidator: { 
      valid: false 
      } 
    }; 
    } 
} 
0

は、あなたは以下のように単純なカスタムバリデータを作成することができます

import {Injectable} from "@angular/core"; 
import {FormControl} from "@angular/forms"; 


@Injectable() 
export class DateValidator { 

    constructor() { 
    } 

    static date(c: FormControl) { 
    const dateRegEx = new RegExp(/^\d{1,2}\.\d{1,2}\.\d{4}$/); 
    return dateRegEx.test(c.value) ? null : {date: true} 
    } 
} 

と、フォーム、その後

senddate: new FormControl(new Date(), Validators.compose([Validators.required, DateValidator.date])), 

し、それを呼び出すには、単に私はこれが役立つことを願って、あなたのhtml

 <mat-error *ngIf="form.controls.senddate.dirty && form.controls.senddate.errors?.date"> 
     La date d'envoi n'est pas <strong>valide</strong> 
     </mat-error> 

にエラーが表示されます。

関連する問題