Angular material custom input - internal validators are removed when calling setValidator from outside

Question

I built a custom datepicker that supports angular material + should work well with angular reactive forms.

(you can install it from npm also: npm install @covercy/datepicker)

The code is on github:

https://github.com/Roitr/angular-triple-input-datepicker/blob/master/projects/datepicker/src/lib/datepicker-triple.component.ts

The component has some internal validators (for example, it validates for invalid date), which are set in the OnInit method.

The issue is that if I change the validators on the input element from outside (when using the component), for example: setValidators(Validators.required), it removes the internal validators.

Where is the correct place to set the intarnal validators? I thought that i should set them each time someone sets the validators from outside, but i didn't find an event that i can listen to for that..

always you make setValidators override all the validators. In general a custom Form control with internal validators, must has as provider a providers: [{ provide: NG_VALIDATORS, useExisting: YourComponent, multi: true}], but then you need Inject the NgControl outside the constructor ] — Eliseo

Ivan Kashtanov Ivan Kashtanov · Accepted Answer · 2019-11-11T14:30:22

I think it's not possible in Angular at the moment. There are a couple of open issues for this. Here's an explanation of difficulties regarding the implementation of this feature.

Angular material custom input - internal validators are removed when calling setValidator from outside

1 Answers