ControlValueAccessor and touched

Question

I have implemented a date picker using three drop downs for date, month and year. The date picker is a component that implements ControlValueAccessor and is working great. However, I would like the control to expose touched when any of the three drop downs are touched.

There are lots of questions about related issues regarding touched, but not this specific issue which seems odd to me since it's something you would want to do by default!

How do I expose a touched state of my component? Additionally, how about pristine, dirty etc.?

https://stackoverflow.com/questions/44730711/how-do-i-know-when-custom-form-control-is-marked-as-pristine-in-angular/44732590#44732590 ?. mask as touched must be easy, its only call to the function onTouched() you declare in your component when you change the dropdown. — Eliseo, Jan 03 '19 at 20:30
I'm calliing `onTouched()` but it's not having any affect on the control's touched state. — serlingpa, Jan 04 '19 at 08:47

Eliseo · Answer 1 · 2019-01-03T20:40:08.610

2

Only for touched: If your component extends of ControlValueAntecesor you have some like

//declare two functions onChange and onTouched
onChange;
onTouched;
//register onChange and onTouched
registerOnChange( fn : any ) : void {
    this.onChange = fn;
}

registerOnTouched( fn : any ) : void {
    this.onTouched = fn;
}

The only thing you need is, when you change one dropdown call to the function

this.onTouched()

edited Jan 03 '19 at 20:40

answered Jan 03 '19 at 20:13

Eliseo

50,109
4
29
67

2

I'm calliing `onTouched()` but it's not having any affect on the control's touched state. – serlingpa Jan 04 '19 at 08:47
1

I modified an old stackblitz of a customFormControl (it's more complex, but sirve the idea) to show how. When click the customControl, mask as touched. In a external button mark as untouched. see in https://stackblitz.com/edit/angular-n9baag?file=src/app/app.component.html – Eliseo Jan 04 '19 at 09:22

ControlValueAccessor and touched

1 Answers1