Angular 4 ngSubmit not getting values from jquery populated inputs

Question

I populate form input field values programmatically with jquery. The values are visible in the form. When I console.log the form data on submit, that data doesn't contain the values. When i modify the values manually, the data does contain the values:

I run a function that populates an input field:

 $('#itemNum').val('myNewValue');

That populates an input like so:

<input type="text" [(ngModel)]="item.number" name="number" id="itemNumber" class="form-control">

I can see this newly populated value in the input field fine. If I edit that input, I can get the value on submit. But if I leave it as is, it only return the component defined properties:

export class MyComponent implements OnInit {
  item: Item = {
    number:0,
    ...
  }
  onSubmit(value){ console.log(value) }
}

How can I get ngForm/ngModel/ngSubmit to see these jquery populated values?

fyi, my form looks like this:

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" [(ngModel)]="item.number" name="number" id="itemNumber" class="form-control">
...
<input type="submit" class="btn btn-primary" value="Confirm">
</form>

Christian · Accepted Answer · 2017-10-15 23:08:50Z

1

Angular and jQuery are different things, there's no way for Angular to know of changes made by jQuery, which you should not be using since that's what you're using Angular for.

If you need to change the value programmatically, then simply:

this.item.number = 10;

And if you were using Reactive Forms instead then you would do it like this:

this.form.get('item.number').setValue(10);

answered Oct 15, 2017 at 23:08

Christian

2,8613 gold badges19 silver badges25 bronze badges

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

1 Comment

edoras Over a year ago

Thanks Christian, I came to realize that after seeing stackoverflow.com/a/17110709/4493441 . My challenge was trying to build a form from a table row built via ngFor loop. I realized the form was just duplicating effort and just ran my submit function straight from that table row where all the data was anyway. Thanks for your help!

Collectives™ on Stack Overflow

Angular 4 ngSubmit not getting values from jquery populated inputs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related