Fill Angular4 Form using jQuery

Question

For automated testing, I would like to fill angular 4 forms. But after submission, Angular is not aware of the changes.

I have forms using form builder with formgroup and formcontrol.

Outside the application, I need to do some automated testing. So when I try to fill the form $('#firstName').val('John'); and submit the form : Angular gives me the previous value in the form and doesn't detect changes on it.

I tried multiple solution, but nothing works like

Run change detection on form submission
this.form.updateValueAndValidity()
playing with ngZone
playing with Change events

I have no idea how I can force Angular to detect my change on the form.

UPDATE HTML

<input type="text" class="input-event" name="firstName" id="firstName" placeholder="First Name" [formControlName]="formFieldNames.firstName" />

UPDATE 2

Here's an example : https://run.plnkr.co/sqseg6kObDICjdEa/

If you fill the form with some data, and submit, you will get the right data in the console.

Now, if you put in the console document.getElementById('fullname').value = 'Jean';

And re-submit, you will see that angular did not update the data, and I would like to know how can I make it so.

you can get the value in your component ts class as this. formFieldNames.controls['firstName'] not sure what condition makes you to chhose jquery. Also there is ElementRef you can use to puck the element and get data — Aniruddha Das
– Aniruddha Das, Commented Oct 13, 2017 at 15:01
jQuery is just an example, I updated the post again, you can check. Thanks — anousss
– anousss, Commented Oct 13, 2017 at 15:09

Aniruddha Das · Accepted Answer · 2017-10-13 15:21:47Z

You are trying to access angular conponent value with non angular reference like core javascript element picker or jQuery element selector. And after non angular value input you want angular should update data in angular life cycle.

You could do that by doing a lot of manual stuff using NgZone. although I never tried here is the document you can follow.

Angular have a life cycle like OnInit and it follows them strictly. For example @Input fields values are available in ngOnInit() rather constructor. So changeDetectionStrategy plays an important role.

So when you execute $('#firstName').val('John'); or document.getElementById('fullname').value = 'Jean'; from browsr developer tool, as these are not events ( like mouse over, keypress, etc), the change detection strategy did not detect them. But if you will write something in that field angular will detect them and update the model

Hope it answers your question.

Phillip Plum · Accepted Answer · 2021-03-26 15:45:16Z

0

You can assign the values that get updated in angular side as well. Please refer following stackoverflow answer. stackoverflow link

edited Mar 26, 2021 at 15:45

Phillip Plum

5574 silver badges14 bronze badges

answered Mar 25, 2021 at 10:05

Hammad

13 bronze badges

Collectives™ on Stack Overflow

Fill Angular4 Form using jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related