Автоматически очищать ввод из элемента в ShadowDOM, используя Angular? - PullRequest
Новая
       36

Автоматически очищать ввод из элемента в ShadowDOM, используя Angular?

1 голос
/ 29 октября 2019

Я использую Ionic для создания автозаполнения ввода, но у меня проблема с браузером, автоматически заполняющим ввод недействительными данными. Я должен быть в состоянии очистить его с помощью Angular.

PS: я добавил automcomplete="off", но это не соблюдается.

Ниже приведен HTML-код для Ionic's ion-input, на который я пытаюсь нацелиться: 

<ion-input #inputElem
           [autocomplete]="enableBrowserAutoComplete ? 'on' : 'off'"
           [name]="name"
           (keyup)="getItems($event)"
           (tap)="handleTap($event)"
           [(ngModel)]="keyword"
           (ngModelChange)="updateModel($event)"
           (ionFocus)="onFocus($event)"
           (ionBlur)="onBlur($event)"></ion-input>

В моем компоненте у меня есть функция updateModel(), которая проверяет ввод на изменения и очищает его, если он недействителен. Однако обнаружение изменений angular не обнаруживает, заполняется ли браузер автоматически.

Или, скажем, если вы манипулируете им в консоли:

$('input.searchbar-input.sc-ion-searchbar-md').value = 'J'

Так что я пытаюсьнайти способ очистить ключевое слово, если нет правильного выбора. Мои самые успешные попытки - использовать ловушки жизненного цикла, такие как OnChanges, DoCheck и AfterViewCheck, но очистки ключевого слова недостаточно. Я должен очистить ввод внутри теневого домена, потому что значение еще не распространяется. Поэтому в функции я должен получить элемент, используя обещание (я подозреваю, что это реальная проблема). Который «работает», пока я сохраняю точку останова в функции жизненного цикла. Когда я удаляю точку останова, вкладка браузера полностью зависает. 

@ViewChild(
  'inputElem',
  {
    read:   ElementRef,
    static: false
  }
)
private inputElem:ElementRef;

[..]

ngOnChanges():void {
    if (!this.hasFocus) {
      if (this.clearInvalidInput && this.selected === null) {
        if (this.keyword !== '') {
          this.keyword = '';
        }

        if (this.inputElem && this.inputElem.nativeElement) {
          this.inputElem.nativeElement.getInputElement().then(
              (element) => {
                if (element.value !== '') {
                  element.value = '';
                }
              }
          );
        }
     }
   }
}

Я опубликовал работу в качестве ответа, но оставляю ее открытой, так как она выглядит очень хакерской.

1 Ответ

0 голосов
/ 30 октября 2019

Я нашел обходной путь, но это не предпочтительное решение. 

ngDoCheck() {
  if (this.inputElem && this.inputElem.nativeElement) {
    if (this.inputElem.nativeElement.children && this.inputElem.nativeElement.children.length !== 0) {
      if (this.inputElem.nativeElement.children[0].children && this.inputElem.nativeElement.children[0].children.length !== 0) {
        if (this.inputElem.nativeElement.children[0].children[0].value) {
          this.inputElem.nativeElement.children[0].children[0].value = '';
        }
      }
    }
  }
}
...