ввод с помощью mat-datepicker-toggle

Question

У меня есть форма, в которой каждое обязательное поле становится красным, если пользователь щелкает и размывает поле, ничего не записывая в поле, проблема возникает с этим средством выбора даты

        <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, но проблема в том, что я хочу, чтобы ввод был красным, но только тогда, когда он должен

Answer 1

Да, проблема в том, что фокус выходит из-под контроля ввода и переходит в календарь. Если вы используете только кнопку по умолчанию в качестве триггера для открытия палитры дат, то с этой проблемой вы не столкнетесь. Но, как и то, что вы сделали, иногда лучше добавить триггер (focus) или (click). Я могу думать только об одной работе вокруг.

Начните с удаления начальных валидаторов из вашего поля. Затем помещайте обработчик всякий раз, когда средство выбора даты материала было закрыто, например:

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

и в методе close вы должны динамически устанавливать валидаторы:

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

Таким образом, проверка будет добавлена ​​только после выбора (или не выбора ничего) из дат в календаре. Я также попытался использовать ввод readonly и все еще работал нормально после тестирования на моей локальной машине.