Material2 - Datepickerカスタムバリデーター値が文字列ではなく日付オブジェクトを返します

Question

datepickerのカスタムバリデーターを反応形式グループを使用して作成しています。上記の例では

私 .TSで

ファイル

form: FormGroup; 

constructor(
    private fb: FormBuilder, 
    private validatorSrv: CustomValidatorService, 
) {} 

createForm(): void { 
    this.form = this.fb.group({ 
     trans_date: [null, [Validators.required, this.validatorSrv.validDate]] 
    }); 
} 

私のクラスで今

CustomValidatorService

validDate(c: AbstractControl): any { 
    // It always return 'Mon Jan 01 2001 00:00:00 GMT+0800 (Taipei Standard Time)' 
    // When value is 1 
    // And 'Sat Dec 01 2001 00:00:00 GMT+0800 (Taipei Standard Time)' 
    // When value is 12 
    console.log(c.value); 
} 

それは常にjsのDateTimeオブジェクトを返します。

カスタムバリデーターAbstractControlから実際の入力値を取得するにはどうすればよいですか？

Answer 1

これは一般的な動作です。あなたができることは、バリデーターで日付を文字列に変換することです。

あなたが知らない場合、角度材料のdatepickerは実際にはmoment.jsを使用できます。

あなたの場合は、おそらくそれを使用できますか？これはあなたの問題を解決するだろう、あなたは瞬時に利用可能な多くの機能のいずれかであなたの日付を変換する必要があります。

Answer 2

これが最も簡単で推奨される方法であるかどうかはわかりません。文字列型のユーザー入力ではなく、日付オブジェクトを持つのが一般的な動作ですから。 AbstractControlのカスタムフォーマットの検証を使用すると、私にはもっと複雑になります。

だから私はちょうどkeypressイベントでコントロールの単純な関数を書いて、その方法を検証しようとします。

isValidDate(): boolean { 
    // A lengthy logic was omitted here for simplicity sake... 
    if (format is mm/dd/yyyy or mm-dd-yyyy) { return true; } 
    return false; 
} 


onTransDateKeydown(e: any): void { 
    const c = this.form.get('trans_date'); 

    if (this.isValidDate(e.target.value)) { 
     c.setErrors(null); 
    } else { 
     c.setErrors({ invalidDate: true }); 
    } 
} 

あなたは、プログラムsetErrors()メソッドを使用してReactiveFormコントロールにエラーを与えることができ、それは素晴らしいです。