日期选择器的 Angular 指令自动完成

Question

我有一个 JQuery 日期选择器指令，它将日期选择器注入输入 HTML 控件。这是由以前的开发人员开发的，此时我对 Angular 还是很陌生。

我的问题是，有什么方法可以防止在我们通过该指令注入的所有日期选择器上显示自动完成？

export class DanialDatePickerDirective implements ControlValueAccessor {

    constructor(protected el: ElementRef, private renderer: Renderer) { }

    @Input() dateformat: string = "DD-MMM-YY";
    @Input() ngModel: any;
    @Input() setDefaultDate: boolean;
    onModelChange: Function = () => { };
    onModelTouched: Function = () => { };

    writeValue(value: any) {
        if (value) {
            var ff = new Date(value);
            $(this.el.nativeElement).datepicker("setDate", ff);
        }
        else {
            $(this.el.nativeElement).datepicker("setDate", "");
        }
    }

    registerOnChange(fn: Function): void {
        this.onModelChange = fn;
    }

    registerOnTouched(fn: Function): void {
        this.onModelTouched = fn;
    }

    onBlur() {
        this.onModelTouched();
    }

    ngAfterViewInit() {
        var self = this;
        $(this.el.nativeElement).datepicker({
            dateFormat: 'dd-M-y',
            changeMonth: true,
            changeYear: true,
            showOtherMonths: true,
            selectOtherMonths: true
        });

        if (this.setDefaultDate) {
            var ff = new Date(self.ngModel);
            setTimeout(function () {
                $(self.el.nativeElement).datepicker("setDate", ff);
            }, 200);
        }

        $(this.el.nativeElement).on('change', (e: any) => {
            var model = e.target.value;
            var date = null;
            var monthstring = '';
            if (model.indexOf("-") > 0){
                monthstring = model.substring(model.indexOf("-") + 1, 5);
            }

            if (isNaN(parseInt(monthstring))) { 
                var tt = moment(model, "DD-MMM-YY").format('YYYY-MM-DD'); 
                date = tt;
                model = moment(model, "DD-MMM-YYYY").format('MM-DD-YYYY') 
            }
            else {

                date = moment(model, "DD-MM-YYYY").format('YYYY-MM-DD'); 
                model = moment(model, "DD-MM-YYYY").format('MM-DD-YYYY') 
            }

            $(".ui-datepicker a").removeAttr("href"); 
            self.onModelChange(date);

             self.writeValue(date.toString());
        });
    }

}

Answer 1

唯一适合我的方法：

首先，确保在输入元素本身和父表单上都设置autocomplete="off"。

其次，确保始终为您的输入字段分配一个唯一的名称。 这可以通过简单地生成一个随机数并在字段名称中使用该数字来实现。

  private getUniqueName() {
    return Math.floor(Math.random() * Date.now());
  }

解释：

过去，许多开发人员会将 autocomplete="off" 添加到他们的 表单字段以防止浏览器执行任何类型的 自动完成功能。虽然 Chrome 仍然会尊重这个标签 对于自动填充数据，它不会尊重自动填充数据。 https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.

所以autocomplete="off" 解决了自动完成问题。但是要解决自动填充问题，您需要通过一遍遍更改输入的名称来玩弄浏览器，这样浏览器将永远不知道如何自动填充；）