Angular2 - custom control validator matching wrong nested control

0
votes

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.

1
angulartypescriptangular2-formsangular4-forms
Can you provide the code for the complete control? – Derek Brown
Really hard to help without seeing the real code – Igor Soloydenko
@DerekBrown, Igor: I know it is hard...but for me will be tricky to extract some working code without lot of unnecessary sauce (MWE). I'll surely provide some code, but at first I tried to post my question without any code sample...it is possible someone's already faced the same situation and has instant solution. Rather than extracting the component I am going to write smaller new one to illustrate the problem. – Jan Drozen

1 Answers

0
votes

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.