fix(datepicker): input validator is not called until a date is first chosen

[FrancescoBorzi]

You have a model-driven form with a field which is a Datepicker element.

If the value of this field is null by default, then the validator of the field will not be called until a date is chosen using the datepicker.

This means that if for example you just select the field, put some random characters (without selecting any date) and then walk away from then field, the validator will still not be called and then the form will be valid in any case (unless you are making that field as required).

Just to stress what I mean: the input field which uses the Datapicker should be marked as NON pristine as soon as the user enters ANY value. Currently it preserves its pristine status as the user types any character, it looses it only when a date is selected.

[FrancescoBorzi]

As a workaround, I added a hackfix forceValidation on keyup to my input field the following:

<input
  formControlName="myDate"
  bsDatepicker
  bsValue="form.get('myDate')"
  value="{{ form.get('myDate').value | date:'yyyy-MM-dd' }}"
  (keyup)="forceValidation('myDate')">
...

...
  forceValidation(controlName: string) {
    const control = this.form.get(controlName);
    control.markAsDirty();
    control.updateValueAndValidity();
  }

[valorkin]

@ShinDarth on the roadmap

[FrancescoBorzi]

the fix worked, thanks a lot!

[skptricks]

nice example… Also you can refer to this new type of data picker, support both mobile and web : http://www.skptricks.com/2018/01/jquery-date-picker-with-example.html

[pradeepmay13]

Hi,
I am unable to validate using custom validator on datepicker while entering junk data it returns Invalid Date.
For Blank input field validation is working fine as shown in figure

But when i am entering character or junk data it returns Invalid date but i am unable to apply angular validation. Please help

HTML Code for This

<input type="text" class="form-control" name="rrf_temp_tenure_from_date" formControlName="rrf_temp_tenure_from_date" placeholder="From Date" bsDatepicker [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY', containerClass:'theme-dark-blue' }">

<div *ngIf="rrfForm.controls['rrf_temp_tenure_from_date'].touched && !rrfForm.controls['rrf_temp_tenure_from_date'].valid " class="text-danger">
<span *ngIf="rrfForm.controls['rrf_temp_tenure_from_date'].hasError('required') ">
From Date is required

<span *ngIf="!rrfForm.controls.rrf_temp_tenure_from_date.hasError('required') && rrfForm.controls.rrf_temp_tenure_from_date.hasError('invalidDate')">Please Enter Valid Date

TS file code
this.rrfForm.get('rrf_temp_tenure_from_date').setValidators([Validators.required, ValidationService.dateValidator]);

Service function

static dateValidator(control) {
if (control.value.match(/^(0[1-9]|1\d|2\d|3[01]).(0[1-9]|1[0-2]).(19|20)\d{2}$/)) {
return null;
} else {
return { 'invalidPassword': true };
}
}

Getting Error on Console :