4

I made an angular 2 model-driven form with nested fields. One of this fields is a numeric field and I am using a jquery plugin to make numeric formatted. I created a directive to init this plugin when a new line of input are added, but when I add a new line, a total must be divided to all lines, it's a quantity. This division I made in a function in my model to update the fields in the formGroup.

My problem is, the view shows the new value for each line, but, the plugin is formatting this field and the browser only shows the field formatted when I put the mouse cursor over. It seems that angular is not updating the view as it should.

Here are some images about whats happening:

First when the layer appears, the first field in the top is not showing formatted, but it's. image 1

Here is how it shows after moving the mouse over: image 2

I added some lines, see how they are shown: image 3

And after moving the mouse over: image 4

Ps: Don't tell me "you should not use jquery with angular blah blah blah...". I know this, but I needed to use it.

Cristal Embalagens
  • 101
  • 9
  • 1
    "you should not use jquery with angular blah blah blah...". – Günter Zöchbauer Mar 15 '17 at 20:44
  • 1
    The problem is that Angular doesn't get notified about the changed values and doesn't run change detection. If an event is fired that your Angular application listens to, then Angular runs change detection. This seems to be the case when you mouse-over the input. You need to make Angular aware from jQuery that change detection needs to be run. There are different approaches http://stackoverflow.com/questions/34827334/triggering-angular2-change-detection-manually – Günter Zöchbauer Mar 15 '17 at 20:46
  • @GünterZöchbauer I tried to do this within chrome console creating events manually with document.createEvent() but with no success, even with mouseover or onmouseover events. I need to know which event I need to fire to make angular to detect that change. EDIT: Those methods inside angular to force a change detection I tried here too, didn't work. – Cristal Embalagens Mar 16 '17 at 10:55
  • It needs to be an event your Angular application listens like `(myEvent)="false"` or `@HostListener('myEvent') handleMyEvent() {}`. And the event needs to be fired inside the component that is listening (within the component or one of its descendants). – Günter Zöchbauer Mar 16 '17 at 10:57
  • 1
    The jquery plugin I am using is autoNumeric. It has its own method to set the value to input and format it. When angular changes the value in the model, it reflects the new value to input but autoNumeric didn't detect it, so I added a HostListener to listen to ngModelChange and call the autoNumeric method to set the value. Now the values are shown formatted in the input. Thanks for the help @GünterZöchbauer. – Cristal Embalagens Mar 16 '17 at 19:14

1 Answers1

-1

My best guess is the changes you're making is made outside Angular hence its change detection engine is not aware of the changes. One simple way to force this is using setTimeout

setTimeout(() => {
  // Code that modify model values go here
})
Julian
  • 609
  • 3
  • 7