Автозаполненные поля браузером не обновляют угловые переменные

Question

У меня проблема в приложении Angular 7. Похоже, что клиенты, заходящие на веб-сайт с Microsoft Edge в Windows 10, имеют функцию автозаполнения (или автозаполнения) веб-форм.

Проблема в том, что в каждой области приложения есть:

• Событие Analytics для отслеживания поведения пользователя
• Функция автоматического сохранения, отправка запроса на сохранение значения (при изменении)

При использовании автозаполнения эти события не запускаются. Независимо от того, используются ли мы формативные формы или формы на основе шаблонов, свойство bounded не обновляется, так как изменение происходит за пределами угловой зоны. Более того, когда поле заполняется браузером, мы не только пропускаем данные, которые вызывают всевозможные ошибки, но и проходят проверку внешнего интерфейса. Форма действительна, и пользователь может вызвать функцию с неполными данными.

Я попробовал ChangeDetectorRef, не повезло.

Чтобы воспроизвести, вы можете программно изменить значение поля, используя чистый JS за пределами угловой зоны (скажем, в конце index.html)

// somewhere at the end of index.html
setTimeout(() => {
  let field = document.getElementsByTagName('input')[0];
  field.value = 'Hello World!';
  
  field = document.getElementsByTagName('input')[1];
  field.value = 'Hello World!';
}, 2500);
// ----- end of index.html snippet


// app.component.ts
export class AppComponent {
  title = 'js-angular';

  test = 'Hi';
  fg: FormGroup;

  constructor(private fb: FormBuilder) {
    this.fg = this.fb.group({
      test: ['Hi']
    })
  }

  doIt() {
    console.log(this.fg.get('test').value);
    console.log(this.test);
  }
}
// ----- end of app.component.ts snippet

<form (submit)="doIt()">
  <input type="text" name="test" [(ngModel)]="test">
  <button type="submit">Envoyer</button>
</form>

<form (submit)="doIt()" [formGroup]="fg">
    <input type="text" formControlName="test">
    <button type="submit">Envoyer</button>
</form>

У меня вопрос: есть ли чистый способ, чтобы автозаполненные поля обновляли связанные с углом переменные и запускали аналитические события?

Решение, которое у меня есть сейчас, - получить значения из полей, используя document.getElementById('idOfThePotentiallyAutofilledField')

Обратите внимание, что это решение является временным для уменьшения количества производственных ошибок.