Javascript mat输入与mat日期选择器切换问题
我有一个表单,如果用户单击并模糊字段而不在字段上写任何内容,则每个必填字段都会变为红色,问题在于这个日期选择器Javascript mat输入与mat日期选择器切换问题,javascript,html,css,angular,datepicker,Javascript,Html,Css,Angular,Datepicker,我有一个表单,如果用户单击并模糊字段而不在字段上写任何内容,则每个必填字段都会变为红色,问题在于这个日期选择器 <mat-form-field class="contenedorFecha" appearance="outline" color="accent"> <mat-label>Fecha plantación</mat-label> <input matInput [matDatepicker]=
<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,但问题是我希望输入是红色的,但只有当它应该是红色的时候,问题是因为焦点离开了输入控件,进入了日历。如果您仅使用默认按钮作为触发器来打开日期选择器,则不会遇到此问题。但就像您所做的那样,有时最好添加
(焦点)
或(单击)
触发器。我只能想到一个解决办法
首先从字段中删除初始验证器。然后在关闭物料日期选择器时放置处理程序,例如:
<mat-datepicker #fechaPlantacion (closed)="close()"></mat-datepicker>
这样,验证将仅在从日历中的日期中选择(或不选择任何内容)后添加。我还尝试了使用只读
输入,在本地机器上测试后仍能正常工作
close() {
this.fechaPlantacion.setValidators(Validators.required);
this.fechaPlantacion.updateValueAndValidity(null);
}