为 ngx-mat-datetime-picker 设置 autocomplete=off

Question

我想删除 ngx-mat-datetime-picker 的自动完成时间

我尝试在 html

中设置

<ngx-mat-datetime-picker autocomplete="off">

并使用 autocimplete="off" 创建了指令

@Directive({
  selector: 'input:not([autocompleteOn])'
})
export class AutocompleteDirective {
  @HostBinding('attr.autocomplete') autoComplete = 'off';
  constructor() {}
}

但它不起作用，自动完成仍然出现 enter image description here

Answer 1

由于下面的规则 angular 不能 select dom 中的所有元素。这就是 input:not([autocompleteOn]) 不起作用的原因。

Angular only allows directives to apply on CSS selectors that do not cross element boundaries. https://angular.io/api/core/Directive#selector

这里的库从这个组件指令创建一个模板覆盖ngx-mat-datetime-picker这就是为什么底层输入标签不继承autocomplete="off"只在主机标签上添加属性。

使用 JS，您可以手动将自动完成功能添加到所有输入和表单子项。正如这个答案中所述，但这不会起作用，因为叠加层是稍后在打开对话框时创建的。所以一个解决方案就是这个自定义指令

@Directive({
  selector: '[autocompleteoff]'
})
export class MatDatetimePickerAutocompleteOffDirective implements OnDestroy{
  openSub;
  constructor(private element: NgxMatDatetimePicker<Date>) {  
    this.openSub = element.openedStream.subscribe((e)=>{
      setTimeout(()=>{
        Array.from(element._popupRef.hostElement.querySelectorAll('input'))
        .forEach(element => {
          element.setAttribute('autocomplete', 'off');
        });
      })
    })
  }
  ngOnDestroy(){
    if(this.openSub) this.openSub.unsubscribe();
  }
}

由于某种原因，事件 openedStream 在输入呈现之前触发得太早，使得此解决方案需要这个丑陋的 setTimeout 才能工作。

值得注意我的浏览器（chrome 最新版）我没有在此处的示例中显示自动完成功能 https://stackblitz.com/edit/angular-zdh58h-dzi5yv?file=src%2Fapp%2Fcard-overview-example.ts

None 越少，可以通过检查 dom

断言将所有日期选择器输入设置为属性 autocomplete="off" 的 objective

为 ngx-mat-datetime-picker 设置 autocomplete=off

Set autocomplete=off for ngx-mat-datetime-picker

angular

datetimepicker