使用javascript的角度更新formcontrol
我们有一个角度的应用程序使用javascript的角度更新formcontrol,javascript,angular,internet-explorer-11,angular-reactive-forms,Javascript,Angular,Internet Explorer 11,Angular Reactive Forms,我们有一个角度的应用程序 检查它是否工作:{{fc.value} 以及组件 public fc=new FormControl('nothing here'); 公共变更(事件):无效{ console.log('changed',事件); } 如何使用javascript更改输入以模拟真实的用户输入? 解决方案必须与IE11配合使用 我们可以使用js更改值: const el=document.getElementById('test'); el.value=‘成功’; 该值会更改,
检查它是否工作:{{fc.value}
以及组件
public fc=new FormControl('nothing here');
公共变更(事件):无效{
console.log('changed',事件);
}
如何使用javascript更改输入以模拟真实的用户输入?
解决方案必须与IE11配合使用
我们可以使用js更改值:
const el=document.getElementById('test');
el.value=‘成功’;
该值会更改,但不会调用change
-方法,也不会更新formControl.value
我怎样才能做到这一点
我无法在组件代码内部执行任何操作,因为它是执行此代码的独立环境。值更改后,我已尝试使用el.dispatchEvent(someEvent)
。其中,someEvent是new Event/new KeyboardEvent,带有keyup
、keydown
、change
,还为其提供了{key:'s}
等对象。。。到目前为止,一切都没起作用。还尝试了el.focus()
和el.blur()
以及其他一些功能
假设这与变更检测
有关,并且自调用设置值
或补丁值
后,fc不会得到更新
一定有这样的东西:
el.value='success';
有棱角的。请相应的凝灰岩();
有什么想法吗
请注意,为了简化示例,(keyup)在这里只是一个示例,可以是任何东西。实际上,我们在模板中包装了angular material datepicker,并在这里有一个(dateChange)-事件。请检查您的代码,在change事件中,您没有更改值。我已经用下面的代码创建了一个示例,看起来一切都很好,我可以得到日志和数据更新
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>
嗨,吕,谢谢你的回答。然而,onSearchChange不应该设置一个值,而是以不同的方式用于发出和处理事件,我们对事件做出反应并执行其他操作。除了一个console.log之外,我没有写任何东西来表明我希望看到该方法被调用。无论我们尝试了什么,SendKeys都会键入一些东西,就像el.value=xyz所做的那样。但是,Angle FormControl不会更改该值,也不会使用此解决方案调用该方法。我无法使用(输入),因为我们不控制角度材质的命名。我注意到您的问题已被修改,您是否仍在使用IE selenium webdriver?如果仍然使用此方法,我还创建了一个示例来测试您的代码,并使用sendkeys方法来模拟真实的用户输入,代码在我这方面运行良好。屏幕截图。谢谢@zhi lv。这在IE11中有效吗?我改变了答案,因为我想知道如何在一般情况下触发角-不一定是硒。Selenium只是这里的情况,是的,这会让事情变得更好,但是我更喜欢一个简单的JS解决方案,以便能够理解正在发生的事情。是的,它在IE 11中工作,你可以查看前面评论中的屏幕截图,它使用的是IE浏览器。
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");