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, Oct 13 '17 at 15:01
jQuery is just an example, I updated the post again, you can check. Thanks — Anas Bud, Oct 13 '17 at 15:09

score 0 · Accepted Answer · answered Oct 13 '17 at 15:21

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.

score 0 · Answer 2 · edited Mar 26 '21 at 15:45

0

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

edited Mar 26 '21 at 15:45

Phillip Plum

537
4
14

answered Mar 25 '21 at 10:05

Hammad

3
3

Fill Angular4 Form using jQuery

2 Answers2