I have weird problem with validating my custom template-driven form control. Everything I want is a "required" validator. Id sounds pretty easy, however I tried to figure it out for a couple of hours without any success.
My control is a "simple" wrapper for another 3rd party autocomplete component. And I want to mark this whole component as required. It means it's value has to be defined and not null. But if I put the required directive on the control, ie.
<my-control ... required></my-control>
the required validator validates content of a text-input somewhere in the nested autocomplete control. If I bind the value (ngModel) of my control I get the correct value. But the validator does not reflect this value.
I also tried to write my own custom-validator. And the result is the same. If I watch the value property of the FormControl passed to the validator I can see the value currently written to the text-input nested somewhere deeper.
I got what I was missing - the ValueAccessor configuration inside the providers section of the Component decorator. As far I now know the binding grabs the first value accessor with this configuration. My one was missing so it dig deeper and matches the one bound to the autocomplete input.