min attribute causing ng-invalid on control (angular 6)

Question

i have owl date time picker in my app as below

<div class="input-group timepicker form-group">
                <input [owlDateTime]="arrivalDate" [owlDateTimeTrigger]="arrivalDate" [min]="date" name="ArrivalDate" class="custom-no-validation form-control"
                [(ngModel)]="myModel.arrivalDate" required #ArrivalDate="ngModel" >
              <owl-date-time #arrivalDate></owl-date-time>
              <span class="calander-icon">
                <i class="glyphicon glyphicon-calendar"></i>
              </span>
              <div *ngIf="myFrom.submitted && ArrivalDate.invalid" class="ErrorTxt">
                  <div *ngIf="ArrivalDate.errors.required && myModel.firstLastArrivalDate">Arrival date is required</div>
                </div>
            </div>

and in ts file

if (!form.valid) {
  let elements = document.getElementsByClassName("ng-invalid");
  if (elements.length > 1) {
    (elements[1] as HTMLElement).style.border ='1px solid red';
    (elements[1] as HTMLElement).focus();
  }
  return;
}

[min]="date" is added to prevent user from selecting past dates , here date is a variable in ts file initialize with new Date() value.

Now after retrieving data , if value in myModel.firstLastArrivalDate is a past date than [min] cause ng-invalid to add in input element ,

min is only from preventing user from selecting past date , it should not check element value and compare with current date i.e: new Date()

How can i prevent min from adding ng-invalid on input element.

score 1 · Answer 1 · answered Jun 27 '20 at 07:20

I guess you can't do that as per documentation it's a min valid date.

You can have a turn around may be this can work.

if :

myModel.firstLastArrivalDate is a past date than [min] -
then set min = myModel.firstLastArrivalDate; - it will now show any error and track it via a flag.
As you open picker : in that event update min date to new date. -- now restriction will be there
if user select a new val then keep that else on close assign the previous value as min date.

--- basically i try to convey is , on open event of date , play with the min attribute value.

Thanks for suggestion , I found another way for it. in forms.Constols.error we can check if there is any error by the key owlMinDate. If yes than we can bypass validation by code. — Saurabh, Jun 30 '20 at 11:32

min attribute causing ng-invalid on control (angular 6)

1 Answers1