mat input with mat-datepicker-toggle problem

Question

I have a form where every required field turns red if the user clicks and blur the field without writing anything on the field, the problem comes with this date picker

        <mat-form-field class="contenedorFecha" appearance="outline" color="accent">
        <mat-label>Fecha plantación</mat-label>
        <input matInput [matDatepicker]="fechaPlantacion" formControlName="fechaPlantacion" readonly (click)="fechaPlantacion.open()">
        <div matSuffix style="display:flex; align-items: center">
            <mat-datepicker-toggle [for]="fechaPlantacion"></mat-datepicker-toggle>
            <button mat-icon-button (click)="deleteDate('fechaPlantacion', $event)" [disableRipple]="true" 
            *ngIf="fincaForm.get('fechaPlantacion').value !== null">
                <mat-icon class="nav-link-icon mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">close</mat-icon>
            </button>
        </div>
        <mat-datepicker #fechaPlantacion></mat-datepicker>
    </mat-form-field>

When I click on the input it opens the matDatePicker, but as it opens the date picker the input blurs, so the input changes to red, any way to prevent this? I've tried with css but the problem is I want the input to be red but only when it should

Answer 1

Yes the problem is because the focus gets out of the input control and goes to the calendar. If you are only using the default button as the trigger to open the date picker, then you won't encounter this issue. But like what you did, sometimes it's better to add that (focus) or (click) trigger. I can only think of one work around.

Start by removing the initial validators from your field. Then put a handler whenever the material date picker was closed such as:

<mat-datepicker #fechaPlantacion (closed)="close()"></mat-datepicker>

and in the close method, you have to set the validators dynamically:

  close() {
    this.fechaPlantacion.setValidators(Validators.required);
    this.fechaPlantacion.updateValueAndValidity(null);
  }

This way, the validation will only be added after the selection (or not selecting anything) from the dates in the calendar. I also tried using readonly input and still working fine after testing in my local machine.