如何为ngx-mat-datetime-picker设置autocomplete=off禁用自动填充

之前方案失效原因 #

• 直接在<ngx-mat-datetime-picker>组件标签上添加autocomplete属性，只会附着在组件的宿主DOM节点上，不会传递到组件内部实际承载输入能力的原生<input>元素上，浏览器自动填充逻辑仅识别原生输入框的属性
• 你编写的自定义指令默认只能匹配组件外部的input元素，受Angular视图封装机制限制，无法直接命中组件内部的input节点
• 额外说明：多数现代浏览器会主动忽略autocomplete="off"的配置，为了提升用户体验强制触发填充逻辑，这也是常规配置不生效的常见原因

可行解决方案 #

方案1：单组件单独配置 #

通过ngx-mat-datetime-picker内置的inputAttrs参数，直接把自动填充配置传递到内部input：

<ngx-mat-datetime-picker 
  [inputAttrs]="{ autocomplete: 'nope' }"
>
</ngx-mat-datetime-picker>

这里使用nope、disable-autofill等任意不被浏览器识别的有效值即可，也可以替换为new-password，禁用效果比off更稳定

方案2：全局自定义指令统一处理 #

如果需要批量处理所有日期选择器，修改自定义指令逻辑，直接匹配组件后主动设置内部input属性：

import { Directive, AfterContentInit, ContentChild, ElementRef } from '@angular/core';
import { NgxMatDatetimePicker } from '@angular-material-components/datetime-picker';

@Directive({
  selector: 'ngx-mat-datetime-picker:not([autocompleteOn])'
})
export class AutocompleteDisableDirective implements AfterContentInit {
  // 匹配组件内部的input元素引用，不同版本组件引用名可能有差异，可对应调整
  @ContentChild('pickerInput', { read: ElementRef }) pickerInput: ElementRef<HTMLInputElement>;

  ngAfterContentInit() {
    this.pickerInput?.nativeElement.setAttribute('autocomplete', 'nope');
  }
}

方案3：兜底方案 #

如果上述配置仍不生效，可以通过读写readonly属性彻底阻断浏览器自动填充触发逻辑：

<ngx-mat-datetime-picker 
  [inputAttrs]="{ readonly: true, autocomplete: 'nope' }"
  (focus)="$event.target.removeAttribute('readonly')"
  (blur)="$event.target.setAttribute('readonly', true)"
>
</ngx-mat-datetime-picker>

内容的提问来源于stack exchange，提问作者oks.belysheva