使用 javascript 更新表单控件

Question

我们有一个带有视图的 Angular 应用程序

<input [formControl]="fc" (keyup)="change($event)" id="test">
check if it worked: {{ fc.value }}

和组件

public fc = new FormControl('nothing here');
public change(event): void {
    console.log('changed', event);
}

如何使用 javascript 更改输入以模拟真实用户输入？

该解决方案必须适用于 IE11。

我们可以用js改变值：

const el = document.getElementById('test');
el.value = 'success';

值发生了变化，但change-方法没有被调用并且formControl.value没有被更新。

我怎样才能做到这一点？

我不能在组件代码内部做任何事情，因为它是一个执行此代码的单独环境。值更改后，我已经尝试使用el.dispatchEvent(someEvent)。其中 someEvent 是带有keyup、keydown、change 的新事件/新键盘事件，并且还给了它像{key: 's'} 这样的对象......到目前为止没有任何效果。还尝试了el.focus() 和el.blur() 以及其他一些东西。

假设这与changeDetection 有关，并且自从setValue 和patchValue 被调用后，fc 就没有得到更新。

一定有这样的：

el.value = 'success';
angular.pleaseDoCorrespondingStuff();

有什么想法吗？

请注意，为了简化示例，(keyup) 在这里只是一个示例，可以是任何东西。实际上，我们将 Angular 材质的日期选择器包装在模板中，并在此处有一个 (dateChange) 事件。

Answer 1

请检查您的代码，在更改事件中，您没有更改值。我使用以下代码在我这边创建了一个示例，似乎一切正常，我可以获取日志和数据更新

component.ts 中的代码：

  onSearchChange(searchValue : string ) {  
    console.log(searchValue);
    this.name = searchValue;
  }

component.html 中的代码：

<input type="text" id="txtinput" class="form-control" (input)="onSearchChange($event.target.value)"><br/>
<span>{{ name}}</span>

我使用您的代码创建了一个示例，当我使用以下代码发送密钥时，它将触发输入事件并获取日志：

            var options = new InternetExplorerOptions()
            {
                InitialBrowserUrl = URL,
                IntroduceInstabilityByIgnoringProtectedModeSettings = true,                   
            };


            var driver = new InternetExplorerDriver(IE_DRIVER_PATH, options);
            driver.Navigate();
            var text = driver.FindElementById("test");
            text.SendKeys("aa");

            text.SendKeys("bb");