[英]mat input with mat-datepicker-toggle problem
我有一個表單,如果用戶單擊並模糊該字段而不在該字段上寫任何內容,則每個必填字段都會變成紅色,這個日期選擇器會出現問題
<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 但問題是我希望輸入是紅色的但只有在它應該的時候
是的,問題是因為焦點離開了輸入控件並轉到了日歷。 如果您僅使用默認按鈕作為打開日期選擇器的觸發器,則不會遇到此問題。 但就像您所做的那樣,有時最好添加那個(focus)
或(click)
觸發器。 我只能想到一種解決方法。
首先從您的領域中刪除初始驗證器。 然后在材料日期選擇器關閉時放置一個處理程序,例如:
<mat-datepicker #fechaPlantacion (closed)="close()"></mat-datepicker>
在 close 方法中,您必須動態設置驗證器:
close() {
this.fechaPlantacion.setValidators(Validators.required);
this.fechaPlantacion.updateValueAndValidity(null);
}
這樣,驗證只會在從日歷中的日期中選擇(或不選擇任何內容)之后添加。 我還嘗試使用readonly
輸入,並且在我的本地機器上測試后仍然工作正常。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.