如何在不禁用Angular表单控件的前提下禁用日期选择器输入框？

我有一个Angular日期选择器，为防止错误输入，仅希望用户使用日期选择器按钮而非输入框操作。因此需要将输入框设置为只读，仅允许通过选择器选择日期。但无法直接在input元素上使用disabled属性（会被FormControl覆盖），也不能调用dateFormControl.disable()方法禁用表单控件（因为我们依赖表单控件的状态变化（从invalid到valid）执行其他逻辑，禁用后状态会一直为'disabled'）。请问是否有无需实际禁用控件即可让输入框不可交互的方法？比如用CSS实现不可点击？

模板代码 #

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

无法直接禁用表单控件的原因 #

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 the error message for #notOrderable errors in the cart-item-component
        if(oldValue === 'INVALID' && newValue === 'VALID') {
          this.multiCartService.reloadCart(OCC_CART_ID_CURRENT);
        }
      }
    )));

这里提供几种无需禁用表单控件即可让输入框不可交互的实用方案：

1. readonly属性+CSS屏蔽交互 #

Angular FormControl不会覆盖readonly属性，可直接给input添加该属性，再配合CSS彻底屏蔽交互：

修改input标签：

<input
  matInput
  [matDatepicker]="picker"
  [min]="data.startDate"
  (dateInput)="formSubmitted$.next()"
  [formControl]="namedDeliveryDateControl"
  readonly
>

添加全局或组件内CSS：

input[readonly][matInput] {
  pointer-events: none;
  /* 可选：添加视觉提示，让用户感知输入框不可编辑 */
  background-color: #f5f5f5;
}

readonly阻止手动输入，pointer-events: none屏蔽点击、聚焦等鼠标操作，同时表单控件的状态变化完全不受影响，能正常触发你的statusChanges监听逻辑。

2. 监听输入事件并阻止默认行为 #

如果不想用readonly，可以监听输入框的键盘、粘贴事件，直接拦截用户输入操作：

修改input标签：

<input
  matInput
  [matDatepicker]="picker"
  [min]="data.startDate"
  (dateInput)="formSubmitted$.next()"
  [formControl]="namedDeliveryDateControl"
  (keydown)="$event.preventDefault()"
  (paste)="$event.preventDefault()"
  (focus)="picker.open()" <!-- 可选：聚焦时直接打开日期选择器提升体验 -->
>

这种方式保留输入框的原有视觉状态，但用户无法通过键盘输入或粘贴内容，依然能通过日期选择器按钮选择日期，表单控件状态正常流转。

3. 自定义指令封装可复用逻辑 #

如果多个页面需要相同的限制，可以封装自定义指令统一处理：

创建指令文件：

import { Directive, HostListener, Input } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';

@Directive({
  selector: '[appDatePickerInputOnly]'
})
export class DatePickerInputOnlyDirective {
  @Input() datePicker!: MatDatepicker<any>;

  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
    event.preventDefault();
  }

  @HostListener('paste', ['$event']) onPaste(event: ClipboardEvent) {
    event.preventDefault();
  }

  @HostListener('focus') onFocus() {
    this.datePicker?.open();
  }
}

模板中使用指令：

<input
  matInput
  [matDatepicker]="picker"
  [min]="data.startDate"
  (dateInput)="formSubmitted$.next()"
  [formControl]="namedDeliveryDateControl"
  appDatePickerInputOnly
  [datePicker]="picker"
>

内容的提问来源于stack exchange，提问作者jchannes