2016-10-12 15 views
2

私は3つのインナー入力を持つ生年月日カスタムコントロールを持っています。 3つの入力がすべて汚れている場合にのみ、親コントロールをダーティーとしてマークします。角2 ControlValueAccessor内のコントロールでmarkAsDirty()を呼び出す方法

カスタム値アクセサの中からNgModelのコントロールにアクセスする必要があります。どうしたらいいですか?コードは必要ありませんが、以下である:すべてがまだ変更されていないとき

@Directive({ 
    selector: '[validateDateOfBirth][formControlName],[validateDateOfBirth][formControl],[validateDateOfBirth][ngModel]', 
    providers: [ 
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateOfBirthValidator), multi: true } 
    ] 
}) 
export class DateOfBirthValidator implements Validator { 
    constructor(@Attribute('validateDateOfBirth') public validateDateOfBirth: string) { 

    } 
    validate(c: AbstractControl): { [key: string]: any } { 
    let v: DateOfBirthVm = c.value; 
    let valid = false; 
    if(v && v.month && v.year) { 
     return null; 
    } 
    return { 
     validateDateOfBirth: false 
    } 
    } 
} 
<date-of-birth 
    validateDateOfBirth 
    ngDefaultControl 
    [(ngModel)]="model.dateOfBirth" 
    #dateOfBirth="ngModel" 
    name="dateOfBirth"></date-of-birth> 
export class DateOfBirth implements ControlValueAccessor { 

    @Input() name: string; 

    private _viewModel: DateOfBirthVm = new DateOfBirthVm(); 

    private _yearOptions: Array<number> = []; 
    private _monthInputValue: string = ''; 
    private _monthControl: FormControl = new FormControl(); 
    private _yearInputValue: string = ''; 
    private _yearControl: FormControl = new FormControl(); 

    constructor(private _appSettings: AppSettings) { 
    this._monthControl.valueChanges.subscribe((value: string) => { 
     this._viewModel.month = value; 
    }); 
    this._yearControl.valueChanges.subscribe((value: string) => { 
     this._viewModel.year = value; 
    }); 
    } 

    ngOnInit() { 
    for(let i=(this._appSettings.currentYear-18); i>1909; i--) { 
     this._yearOptions.push(i); 
    } 
    } 

    //Interface specific stuff. 
    //To notify external component's that the model has changed, we must call our 
    //registeredOnChange handler. (e.g _onChanged()). Simply calling it, informs other components. 
    registerOnChange(fn: any) { this._onChanged = fn; } 
    registerOnTouched(fn: any) { this._onTouched = fn; } 
    private _onChanged = (value) => { }; 
    private _onTouched =() => { }; 
    //write value is called when an external component writes to our model. 
    //e.g if another component with ([ngModel])="myAutoCompleteValue", calls myAutoCompleteValue = ''; 
    writeValue(vm: DateOfBirthVm) { 
    if(!vm) { 
     this._viewModel.month = ''; 
     this._viewModel.year = ''; 
    } else { 
     this._viewModel = vm; 
     this._monthInputValue = vm.month; 
     this._yearInputValue = vm.year; 
     this._onChanged(vm); 
    } 
    } 

} 
+0

「NgModelのコントロールにアクセスする」とはどういう意味ですか? 'DateOfBirth'ではないか、' 'が使われる親コンポーネントでそれを呼びたいのですか? –

+0

"コードは必要ではありませんが、以下の通りです:"コードは絶対必要です。それがなければ質問はあまり意味がありません。コードで理解するのは難しいです;-) –

+0

私の間違い!基本的に問題は、validateDateOfBirth(editを参照してください)は、dateOfBirthが汚れている場合の検証メッセージを表示します。しかし、dateOfBirthは、子フィールドのうちの1つだけがタッチされたときに、すべて3になったときにダーティにされているので、私の検証メッセージが途中で表示されます。おそらく、この状況に関する私の知識は、エレガントな解決策を見つけるのに十分ではありません。アドバイスをお願いしますか?ありがとう! – Baconbeastnz

答えて

2

だけ_onChanged()または_onTouched()を呼び出すことはありません。

関連する問題