I have a customized angular date picker where I want to restrict user input by disabling the input field and only allowing selection from the date picker. However, using the "disabled" attribute on the input element is not an option due to conflicts with the form control. Disabling the input using dateFormControl.disable() also poses challenges as it affects the form control status changes required for other functionalities. Is there a CSS-based solution to make the input non-clickable without actually disabling it?
Here is my template code:
<mat-form-field appearance="fill">
<mat-label>{{'cart.requested-delivery-date' |cxTranslate}}</mat-label>
<input
matInput
[matDatepicker]="picker"
[min]="data.startDate"
(dateInput)="formSubmitted$.next()"
[formControl]="namedDeliveryDateControl"
>
<mat-datepicker-toggle
matSuffix
[for]="picker"
>
<mat-icon
class="icon-calendar"
matDatepickerToggleIcon
></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error
*ngIf="namedDeliveryDateControl.errors?.invalidDate"
class="fs-14"
>
{{ 'ecommerce.ndd.validation.error.invalidDate.' + namedDeliveryDateControl.errors.invalidDate | cxTranslate }}
</mat-error>
</mat-form-field>
Explanation why direct form control disablement is not feasible:
this.hold(this.namedDeliveryDateControl.statusChanges.pipe(
startWith(this.namedDeliveryDateControl.status),
pairwise(),
tap(([oldValue, newValue]) => {
this.cartFacade.setEntryFormValidity(this.get('entry').entryNumber, newValue);
// Reload the cart to refresh error messages for #notOrderable errors in the cart-item-component
if(oldValue === 'INVALID' && newValue === 'VALID') {
this.multiCartService.reloadCart(OCC_CART_ID_CURRENT);
}
}
)));