带有 mat-datepicker-toggle 问题的 mat 输入答案

【问题标题】：mat input with mat-datepicker-toggle problem带有 mat-datepicker-toggle 问题的 mat 输入
【发布时间】：2020-01-23 15:50:24
【问题描述】：

我有一个表单，如果用户单击并模糊该字段而不在该字段上写任何内容，则每个必填字段都会变为红色，此日期选择器出现问题

        <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>

当我单击输入时，它会打开 matDatePicker，但是当它打开日期选择器时，输入会变得模糊，因此输入会变为红色，有什么办法可以防止这种情况发生吗？我已经尝试过使用 css，但问题是我希望输入是红色的，但只有在它应该是红色的时候

【问题讨论】：

标签： javascript html css angular datepicker

【解决方案1】：

是的，问题是因为焦点离开输入控件并转到日历。如果您仅使用默认按钮作为打开日期选择器的触发器，则不会遇到此问题。但就像您所做的那样，有时最好添加 (focus) 或 (click) 触发器。我只能想到一种解决方法。

首先从您的字段中删除初始验证器。然后在材料日期选择器关闭时放置一个处理程序，例如：

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

在 close 方法中，您必须动态设置验证器：

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

这样，验证只会在从日历中的日期中选择（或不选择任何内容）之后添加。我还尝试使用readonly 输入，在本地机器上测试后仍然可以正常工作。

【讨论】：