Установить значение элемента ввода из TypeScript

Question

В нашем приложении Angular мы используем элемент управления от Telerik, например:

<kendo-recurrence-editor [start]="startDate" (valueChange)="onRecurrenceChange($event)">
</kendo-recurrence-editor>

К сожалению они не предоставляют много свойств / событий , поэтому нет способ использования нормальной модели привязки. Вот почему мы можем использовать только событие valueChange.

Если кто-то изменит значение входа этого элемента управления, то функция onRecurrenceChange будет вызвана правильно:

public onRecurrenceChange(e) {
  this.recurrence = e;  
  ...     
}

Сейчас Следующее, что мы делаем, это проверяем входные элементы внутри этого элемента управления.

Если, например, значение ввода недопустимо, мы сбрасываем значение ввода как:

public onRecurrenceChange(e) {
    ...
    var inputs = this.recurrenceEditorDiv.nativeElement.querySelectorAll("input");
    inputs[3].value = 1;
}

Значение сбрасывается правильно, поэтому функционально оно работает, но в то же время мы получаем ошибку javascript: ExpressionChangedAfterItHasBeenCheckedError.

Кажется, причина root в том, что мы установили это входное значение путем манипулирования DOM самостоятельно в обработчике событий.

Я пытался сделать это в setTimeout(), но это не решило проблему.

Итак, мой вопрос: каким образом мы можем манипулировать DOM из TypeScript и изменять значение входного элемента, и поддерживать TypeScript довольным?

РЕДАКТИРОВАТЬ: я создал stackblitz, но здесь Я не вижу исключения, которое выдается в Visual Studio: https://stackblitz.com/edit/angular-x1wpld. Если вы наберете go в DAILY и наберете 999 в 'после x вхождений', оно будет сброшено до 1. Но, как уже говорилось, в visual studio я получаю ошибку ExpressionChangedAfterItHasBeenCheckedError.

EDIT 2: кажется Чтобы решить эту проблему, поместите полную проверку в setTimeout, а не только устанавливая значение в setTimeout.

Answer 1

Я не уверен, однако попробуйте:

public onRecurrenceChange(e) {
    ...
    var inputs = this.recurrenceEditorDiv.nativeElement.querySelectorAll("input");
    inputs[3].value = 1;
    inputs[3].dispatchEvent(new Event('input'));
}

Answer 2

Вы пробовали это?

public onRecurrenceChange(e) {
     setTimeout(() => {
       ...
       var inputs = this.recurrenceEditorDiv.nativeElement.querySelectorAll("input");
       inputs[3].value = 1;
     },
       0
     );
}

Кажется, это работает для меня, в некоторых случаях я использовал его. Я не использую компонент Scheduler.

Я думаю, это что-то вроде соответствующей ошибки для Kendo Angular Datepicker .