Автозаполнение на угловой директиве для выбора даты

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());
  }

Объяснение:

В прошлом многие разработчики добавляли автозаполнение= "отключить" их поля формы, чтобы браузер не выполнял какие-либо функции автозаполнения.Хотя Chrome по-прежнему будет учитывать этот тег для данных автозаполнения, он не будет учитывать его для данных автозаполнения.https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.

Итак, autocomplete="off" решает проблему автозаполнения.Но чтобы решить проблему автозаполнения, вам нужно поиграть с браузером, изменив имя ввода снова и снова, таким образом браузер никогда не узнает, как выполнить автозаполнение;)