Ngx-bootstrap: Timepicker validation does not integrate with ngModel / FormControl

[jonrimmer]

Bug description or feature request:

The TimePicker component has internal validation, but it does connect this with ngModel / FormControl, so it cannot be easily integrated into the overall validation of a template-driven or reactive form.

When [(ngModel)] is used on a TimePicker, the valid property of the ngModel instance should reflect the validation state of the component. Likewise with FormControl. This should just be a case of making TimePicker implement Validator, as DatePicker and DaterangePicker already do.

Plunker/StackBlitz that reproduces the issue:

Template-driven form example:
https://stackblitz.com/edit/angular-biwhc6?file=src%2Fapp%2Fapp.component.html

Reactive form example:
https://stackblitz.com/edit/angular-dk1ez5?file=src%2Fapp%2Fapp.component.html

Even when setting the timepicker to an invalid time, the validat property of the ngModel / FormControl remains true.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.3.0

Angular: 7.2.7

Bootstrap: 4

Build system: Angular CLI, System.js, webpack, starter seed:

Angular CLI

[francovp]

Hmm, 10 days and no answers from the developers

[mcanic]

yes this makes timepicker not totally unusable, but I have to workaround. it sould integrate as expected with form validation, but it's not

[amiram]

I need this too. When the user enters invalid data like letters, there is a red sign inside the control but its value is null, and if this field is not required, it means it is valid. I think it can be solved in either of these ways:

1. propagate an invalid date when the data is invalid. In the form we'll just have to add a custom validator that checks if there is an invalid date. This change is a breaking change.
2. Revert the value if the user enters invalid characters just after the control loses focus, just like the date picker does. This change is not a breaking change.

[jspivack]

Still broken with Angular 10