Angular update formcontrol with javascript

Question

We have got an Angular Application with a view

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

and the component

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

How can I change the input with javascript to simulate a real user input?

The solution has to work with IE11.

We can change the value with js:

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

The value changes but the change-method is not being called and the formControl.value is not being updated.

How can I achieve this?

I cannot do anything inside of the component code as its a separate environment that executes this code. I already tried with el.dispatchEvent(someEvent) after the value change. Where someEvent was new Event / new KeyboardEvent with keyup, keydown, change, and also gave it objects like {key: 's'} ... and nothing worked so far. Also tried with el.focus() and el.blur() and some other things.

The assumption is that this has to do with changeDetection and that the fc doesn't get updated since setValue nor patchValue get called.

There must be something like this:

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

Any Ideas?

Please note that for simplifying the example the (keyup) is just an example here, could be anything. In reality we wrap the angular material datepicker in the template and have a (dateChange)-event here.

Zhi Lv · Accepted Answer · 2019-09-25 10:07:22Z

1

Please check your code, in the change event, you didn't change the value. I have created a sample on my side using the following code, it seems that everything works well, I could get the log and the data update

Code in the component.ts:

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

Code in component.html :

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

I have created a sample using your code, When I using the following code to send keys, it will trigger the input event and get the log:

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

edited Sep 25, 2019 at 10:07

answered Sep 18, 2019 at 14:38

Zhi Lv

22.2k1 gold badge28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hogan Over a year ago

Hi Lv, thank you for the answer. The onSearchChange however should not set a value but is used in a different way to emit and event upon which we react to and do other stuff. I didnt write everything but a console.log to show that I want to see that the method got called. Whatever we tried, SendKeys typed something, just what el.value = xyz does. BUT, the Angular FormControl doesnt change the value nor does the method get called with this solution. I cannot use (input) since we don't control the Angular Material naming.

Zhi Lv Over a year ago

I notice that your question was modified, whether you are still using the IE selenium webdriver? If still using this method, I have also created a sample to test your code and using the sendkeys method to simulate a real user input, the code works well on my side. the screenshot as below.

hogan Over a year ago

Thank you @zhi-lv does this work in IE11? I changed the answer because I'd like to know how to trigger that in Angular in general - not necessarily selenium. Selenium is just the circumstance here and yes, would make things better here, however I'd prefer a plain JS solution to be able to understand what is going on.

Zhi Lv Over a year ago

Yes, it works in IE 11, you could check the screenshot in the previous comment, it is using IE browser.

Collectives™ on Stack Overflow

Angular update formcontrol with javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related