Есть ли способ избежать setTimeout?

Question

Я создал пользовательский элемент управления, который реализует ControlValueAccessor, и поместил этот элемент управления в угловую форму, управляемую шаблоном.

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

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

Это не первый раз, когда я сталкиваюсь с такой проблемой, когда ngAfterViewInit вызывается слишком рано, но нет контролируемого / синхронного способа выполнить какую-либо операцию позже.

Есть ли способ избежать setTimeout в ngAfterViewInit ?

Вот небольшой пример без setTimeout, который показывает, что writeValue вызывается после ngAfterViewInit : https://stackblitz.com/edit/angular-ngafterviewinit-quirks

Заранее спасибо!

Answer 1

Я думаю, что "простой" вещью было бы назвать updateValueAndValidity, а не просто сфокусировать ее.Обязательно вызовите его в ngAfterViewChecked

<custom-control name="custom" [(ngModel)]="model.custom" minlength="100"></custom-control>

ngAfterViewChecked(): void {
    this.formRef.form.controls['custom'].updateValueAndValidity();
    console.log(this.formRef.form.controls['custom'].valid);
  }

Существует другое решение, если вы не хотите, чтобы ссылка на элемент управления в родительском элементе объяснялась здесь в другом вопросе SO: setValidators inПользовательский контроль без ссылки в Angular