Ngx-bootstrap: Allow invalid dates with manual input

[plevko]

AFAIK there is currently no config option to allow manual input of invalid parsable dates.
I found this PR https://github.com/valor-software/ngx-bootstrap/pull/5532 and it looks like it is by design.

But the issue here is that in my use case and don't want to change what the user typed, I just want to display error message.

When using @Input() minDate and manually writing e.g. minDate - 1 then the datepicker date is set to minDate (but control is not, I think this is bug https://github.com/valor-software/ngx-bootstrap/issues/5738 )

Describe the solution you'd like

new BsDatepickerConfig option:

invalidInputAllowed: boolean;

Additional context

https://stackblitz.com/edit/angular-jbmlzh

Steps to reproduce:

1. manually write yesterday

[Swabo]

Same here. I find it bad UX to automatically change the users input, as the user may not recognize the change and therefore save wrong values. Before #5532 I kept the invalid input in the input field and displayed an error message to the user. This way the user was able to see and fix the invalid input.

In my opinion the new behaviour is even inconsistent because it fixes the invalid input to a valid value but it still keeps the error on the form control. Now the user needs to change the auto corrected value in order to remove the error. Even in case the auto corrected value was desired at first the user needs to change the value to remove the error and then change it back.

I would highly appreciate a config option to disable the auto correction.

As a quick local fix, is it somehow possible to override the validate function in BsDatepickerInputDirective?

[plevko]

As a quick local fix, is it somehow possible to override the validate function in BsDatepickerInputDirective?

Yes, it is. You can override BsDatepickerInputDirective.prototype.validate before application starts. I created a function, which is then called in main.ts
Overridden validate:

  BsDatepickerInputDirective.prototype.validate = function(
    c: AbstractControl
  ): ValidationErrors {
    const _value = c.value;
    if (_value === null || _value === undefined || _value === "") {
      return null;
    }
    if (DateUtils.isDate(_value)) {
      const _isDateValid = DateUtils.isDateValid(_value);
      if (!_isDateValid) {
        return { bsDate: { invalid: _value } };
      }
      if (
        this._picker &&
        this._picker.minDate &&
        DateUtils.isBefore(_value, this._picker.minDate)
      ) {
        return { bsDate: { minDate: this._picker.minDate } };
      }
      if (
        this._picker &&
        this._picker.maxDate &&
        DateUtils.isAfter(_value, this._picker.maxDate)
      ) {
        return { bsDate: { maxDate: this._picker.maxDate } };
      }
    } 
  };

I removed the problematic this.writeValue(this._picker.minDate); and this.writeValue(this._picker.maxDate); lines

Full implementation here: https://stackblitz.com/edit/angular-jbmlzh-hqecrl

[amitzw]

Is there any plan to implement this in the near future?
This is causing weird behavior and I would rather not override the default validate function.

[e93rtP]

As a quick local fix, is it somehow possible to override the validate function in BsDatepickerInputDirective?

Yes, it is. You can override BsDatepickerInputDirective.prototype.validate before application starts. I created a function, which is then called in main.ts
Overridden validate:

  BsDatepickerInputDirective.prototype.validate = function(
    c: AbstractControl
  ): ValidationErrors {
    const _value = c.value;
    if (_value === null || _value === undefined || _value === "") {
      return null;
    }
    if (DateUtils.isDate(_value)) {
      const _isDateValid = DateUtils.isDateValid(_value);
      if (!_isDateValid) {
        return { bsDate: { invalid: _value } };
      }
      if (
        this._picker &&
        this._picker.minDate &&
        DateUtils.isBefore(_value, this._picker.minDate)
      ) {
        return { bsDate: { minDate: this._picker.minDate } };
      }
      if (
        this._picker &&
        this._picker.maxDate &&
        DateUtils.isAfter(_value, this._picker.maxDate)
      ) {
        return { bsDate: { maxDate: this._picker.maxDate } };
      }
    } 
  };

I removed the problematic this.writeValue(this._picker.minDate); and this.writeValue(this._picker.maxDate); lines

Full implementation here: https://stackblitz.com/edit/angular-jbmlzh-hqecrl

This seems to solve the issue also when retrieved date from db is from the past, and minDate changes the value to minDate.
version 5.5.0.