Angular 从TypeScript设置输入元素的值

在Angular应用程序中，我们使用Telerik的控件，如：

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

现在，我们要做的下一件事是验证这个控件中的输入元素

例如，如果输入值无效，我们将重置输入值，如下所示：

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

该值已正确重置，因此在功能上似乎可以正常工作，但同时我们得到一个javascript错误：

expressionChangedTerithasBeenCheckedError

根本原因似乎是我们自己在事件处理程序中操纵DOM来设置这个输入值

我试图在一个

setTimeout（）

中实现这一点，但这并不能解决问题

所以我的问题是：我们可以用哪种方式从TypeScript操作DOM并更改输入元素的值，从而使TypeScript满意

编辑：我创建了一个stackblitz，但在这里我没有看到Visual Studio中引发的异常：。如果您转到“每日”，并在“x发生后”中键入999，它将重置为1。但正如前面所说，在VisualStudio中，我得到了

表达式changedTerithasBeenCheckedError

错误

编辑2：似乎可以通过将完整验证放在setTimeout中来解决，而不是只在setTimeout中设置值。

您尝试过吗

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

它似乎对我有用，在某些情况下我用过它。不过，我没有使用

调度程序
组件

我想大概是这样吧。
我不确定，不过试试看：

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

你能创建吗？你应该阅读角度变化检测，以及组件如何工作。基本上，您不想操纵DOM元素，除非这是一个非常特殊的情况。我不熟悉剑道库，但我很确定他们公开了自己的ngModel或类似属性，以便在组件上进行双向绑定。使用它，更改将在NgZone内运行，即使用应用程序lifehook管理。@我添加了它，请参见编辑。@TotalyNewb不幸的是，他们似乎没有为此公开它：是的，就像在StackBlitz中一样，我这样做了，但错误仍然存在。太好了！不过，我在控制台中看不到任何错误。只是如果用户单击“从不”，则“无法读取属性”包括“空值”，但我想这是您无论如何都要解决的问题。是的，这是一个快速模拟。但事实上，错误并没有显示在那里。但这是在我当地的发展环境中。
public onRecurrenceChange(e) {
    ...
    var inputs = this.recurrenceEditorDiv.nativeElement.querySelectorAll("input");
    inputs[3].value = 1;
    inputs[3].dispatchEvent(new Event('input'));
}