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);
}
}
}
「NgModelのコントロールにアクセスする」とはどういう意味ですか? 'DateOfBirth'ではないか、' 'が使われる親コンポーネントでそれを呼びたいのですか? –
"コードは必要ではありませんが、以下の通りです:"コードは絶対必要です。それがなければ質問はあまり意味がありません。コードで理解するのは難しいです;-) –
私の間違い!基本的に問題は、validateDateOfBirth(editを参照してください)は、dateOfBirthが汚れている場合の検証メッセージを表示します。しかし、dateOfBirthは、子フィールドのうちの1つだけがタッチされたときに、すべて3になったときにダーティにされているので、私の検証メッセージが途中で表示されます。おそらく、この状況に関する私の知識は、エレガントな解決策を見つけるのに十分ではありません。アドバイスをお願いしますか?ありがとう! – Baconbeastnz