2017-01-26 4 views
1

バリデータディレクティブの内部から検証を開始する必要があります。Angular2 - 検証ディレクティブでAbstractControlインスタンスにアクセス

ここに私が持っている指示があります。それは期待どおりに動作します。しかし、バリデータ関数が変更されたときにバリデーションプロセスをトリガする必要があります。私。入力変数maxDateが変更されたとき。

どうすればいいですか?

コンストラクタのAbstractControlインスタンスにアクセスできたら、これを簡単に行うことができます。しかし、私はそれを行う方法を考えることができません。

import { AbstractControl, FormGroup, ValidatorFn, Validator, NG_VALIDATORS, Validators } from '@angular/forms'; 
import { Directive, Input, OnChanges, SimpleChanges, EventEmitter } from '@angular/core'; 


function parseDate(date: string):any { 
    var pattern = /(\d{2})-(\d{2})-(\d{4})/; 
    if (date) { 
    var replaced = date.search(pattern) >= 0;  
    return replaced ? new Date(date.replace(pattern,'$3-$1-$2')) : null; 
    } 

    return date; 
} 


export function maxDateValidator(maxDateObj): ValidatorFn { 
    return (control:AbstractControl): {[key: string]: any} => {  
    const val = control.value; 

    let date = parseDate(val); 
    let maxDate = parseDate(maxDateObj.max);  

    if (date && maxDate && date > maxDate) { 
     return { 
     maxDateExceeded: true 
     }; 
    } 
    return null; 
    }; 
} 

...

@Directive({ 
    selector: '[maxDate]', 
    providers: [{provide: NG_VALIDATORS, useExisting: maxDateDirective, multi: true}] 
}) 
export class maxDateDirective implements Validator, OnChanges { 
    @Input() maxDate: string; 

    private valFn = Validators.nullValidator; 

    constructor() { } 

    ngOnChanges(changes: SimpleChanges): void { 
    const change = changes['maxDate']; 
    if (change) { 
     const val: string = change.currentValue;  
     this.valFn = maxDateValidator(val); 
    } 
    else { 
     this.valFn = Validators.nullValidator; 
    } 
    //This is where I want to trigger the validation again. 
    } 

    validate(control): {[key: string]: any} { 
    return this.valFn(control); 
    } 
} 

使用法:

<input type="text" [(ngModel)]="deathDateVal"> 

    <input class="form-control"   
      type="text" 
      tabindex="1" 
      [maxDate]="deathDateVal" 
      name="will_date" 
      [textMask]="{pipe: datePipe, mask: dateMask, keepCharPositions: true}" 
      ngModel 
      #willDate="ngModel"> 
+0

あなたのコードは大丈夫と思われますが、何が問題なのですか? – AngularChef

+0

検証パラメータが変更されたときに検証を再実行したいと思う。私は 'maxDate' –

+0

申し訳ありませんが、私はそれを取得しません。 'ngOnChanges'は入力が変わるたびに呼び出されます。したがって、' maxDate'が変わるたびに呼び出されます。コードが機能しているはずです。 – AngularChef

答えて

1

うーん...

そう...

ここでは、私はちょうどたものですお越しください。

@Directive({ 
    selector: '[maxDate]', 
    providers: [{provide: NG_VALIDATORS, useExisting: maxDateDirective, multi: true}] 
}) 
export class maxDateDirective implements Validator, OnChanges { 
    @Input() maxDate: string; 

    private valFn = Validators.nullValidator; 
    private control:AbstractControl; 

    constructor() { } 

    ngOnChanges(changes: SimpleChanges): void { 
    const change = changes['maxDate']; 
    if (change) { 
     const val: string = change.currentValue;  
     this.valFn = maxDateValidator(val); 
    } 
    else { 
     this.valFn = Validators.nullValidator; 
    } 

    if (this.control) { 
     this.control.updateValueAndValidity(this.control); 
    } 
    } 

    validate(_control:AbstractControl): {[key: string]: any} { 
    this.control = _control; 
    return this.valFn(_control); 
    } 
} 

これは機能します。 Validateは初期化時に呼び出されるので、パラメータを保存するだけです。 醜いですが動作します。

これを解決しようとしているすべての人に感謝します!

関連する問題