时间戳

首页 > 解决方案 > 使用 javascript 更新表单控件

javascript - 使用 javascript 更新表单控件

问题描述

我们有一个带有视图的 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没有调用 -method 并且没有更新 formControl.value。

我怎样才能做到这一点？

我不能在组件代码内部做任何事情，因为它是一个执行此代码的单独环境。el.dispatchEvent(someEvent)值更改后我已经尝试过。其中 someEvent 是 new Event / new KeyboardEvent with keyup, keydown, change, 并且还给了它诸如{key: 's'}... 之类的对象，但到目前为止没有任何效果。还尝试了el.focus()andel.blur()和其他一些东西。

假设这与changeDetectionfc 没有得到更新有关，setValue也没有patchValue被调用。

一定有这样的东西：

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

有任何想法吗？

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

标签： javascriptangularinternet-explorer-11angular-reactive-forms

解决方案

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

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");

推荐阅读