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
– Eliseo, Commented Nov 11, 2019 at 15:28

Ivan Kashtanov · Accepted Answer · 2019-11-11 14:30:22Z

1

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.

answered Nov 11, 2019 at 14:30

Ivan Kashtanov

7045 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RoiTr Over a year ago

Ok i see, so would you also set the validation like i did (in the onInit function of the custom component)? i must have an invalid date validation internally..

Ivan Kashtanov Over a year ago

Can't think of a better way, unfortunately. But frankly speaking, I didn't have the opportunity to build custom input with complex internal logic (at least your control level) for a serious task, so there might be something available.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related