Angular 2 doesn't update input value modified by third-party libraries

Question

I have a simple form with its input field associated to a directive:

<form id="scrollable-dropdown-menu">
  <input class="input-field" name="value" [someDirective] type="text"  [(ngModel)]="value" #query="ngModel" />
  <button (click)="onPost(query.value)" type="submit">Search</button>
</form>

The directive changes the input field through the use of a third party library. In my particular case, this is an autocomplete/typeahead Jquery plugin. This plugin provides options to the user and after selecting an option, it changes the value of the input field.

However, Angular doesn't update its property query.value and therefore, passes the old value to the onPost method.

The directive looks something like this:

@Directive({
    selector: '[someDirective]',
})
export class MyDirective  {
     constructor(private elRef: ElementRef, private renderer: Renderer) {
         // this changes the value of the field if the user selects an option
         $('.input-field').plugin(); 
     }

}

I was suggested to use UpdateValue, but I can't see how to use it inside a directive. That led me to look at @ViewChild, but it doesn't seem to work in directives, although I could be mistaken.

I also tried to force an update by injecting ChangeDetectorRef, but I didn't see any difference. This is what I did:

my.directive.ts

import {ChangeDetectorRef} from '@angular/core';
@Directive({
    selector: '[someDirective]',
})
export class MyDirective  {
    constructor(private elRef: ElementRef, private renderer: Renderer, private detectorRef: ChangeDetectorRef) {
       $('.input-field').plugin(); 

       $('.input-field').my-plugin(':selected', ()=>{ 
          // do something... 
          this.detectorRef.detectChanges();
       })
    }



}

AfterSelection is triggered when the user selects an option from the autocomplete plugin. For the plugin, it looks a bit different because it binds to some event, but I think this illustrates the idea.

I would appreciate any suggestions.

UPDATE:

This is a plnkr to show the main issue using the typeahead.js library. If you write a letter in the input field, it will show you some options. Select one of them and the value of the input field will change accordingly. However, when you submit the form (clicking on the input field or pressing enter), an alert will show that the value that was passed to the onPost function was the old value of the field and not the autocompleted value you selected.

In someDirective where do you put $('.input-field').plugin(); after updating your question? — micronyks
– micronyks, Commented Jul 10, 2016 at 7:19
Oh, sorry. Now it looks like I have two different directives. No, both snippets are the same directive. The part that includes detectChanges is after the $('.input-field').plugin() because the plugin needs to be instantiated and then it can detect events (e.g. AfterSelection in my example). I will correct it to avoid confusion. — r_31415
– r_31415, Commented Jul 10, 2016 at 7:23
I think now both snippets reflect better what I have. Notice that both calls (plugin and AfterSelection are inside the constructor). I'm not sure if that's a problem. — r_31415
– r_31415, Commented Jul 10, 2016 at 7:32

r_31415 · Accepted Answer · 2016-07-14 16:21:17Z

1

Provisional solution: Demo. Passing the form to the custom directive and using updateValue to manually change the value:

my.component.ts

<form *ngIf="active" #frm="ngForm">
    <input name="value" [myDirective]="frm" type="text" [(ngModel)]="value" #query="ngModel" />
    <button (click)="onPost(query.value)" type="submit">Search</button>
</form>

my.directive.ts

@Directive({
    selector: '[myDirective]',
})
export class MyDirective  {

    @Input('myDirectivev') query;
... 
$(this.elRef.nativeElement).my-plugin(':selected', (ev, suggestion) => {
        this.query.controls['value'].updateValue(suggestion);
      });

This works, but let me know if there is a standard approach to solve this kind of issue.

answered Jul 14, 2016 at 16:21

r_31415

8,99218 gold badges81 silver badges124 bronze badges

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

Comments

r_31415 · Accepted Answer · 2016-07-25 22:34:29Z

I was told about another solution on Gitter. Unfortunately, I can't remember who told me about it and Gitter's search functionality doesn't help me. Since this person hasn't posted his solution, I will share it for the benefit of people who might be interested.

The idea is basically to pass the whole field as an argument to the onPost(input) method and access the value property of the input field (input.value).

@Component({
  selector: 'my-app',
  template: `
  <form id="scrollable-dropdown-menu" class="search-form">
      <input name="value" class="form-control typeahead" typeahead type="text" data-provide="typeahead" [(ngModel)]="thing" #query />
      <button (click)="onPost(query)" class="btn btn-default search-button" type="submit">Search</button>
  </form>
  `,
  directives: [TypeaheadDirective],
  providers: []
})
export class AppComponent { 
  onPost(input) {
    alert(`Your current value is ${input.value}`);
  }
}

Notice the [(ngModel)]="thing" and #query in the input field. I'm not entirely sure why this updates its value correctly and the native attempt doesn't, but this is far simpler than other alternatives. Here you can find a demo.

Günter Zöchbauer · Accepted Answer · 2016-07-26 05:10:38Z

1

Instead of

this.detectorRef.detectChanges();

use

$('.input-field').trigger('input');

ControlValueAccessor used by ngModel listens to input events for normal input fields.

answered Jul 26, 2016 at 5:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

r_31415 Over a year ago

Can you post a demo of your solution? As far as I can see, what works is to use #query and not #query="ngModel".

Günter Zöchbauer Over a year ago

Right, I missed that #query="ngModel" doesn't make any sense.

Vincente · Accepted Answer · 2017-12-22 18:35:54Z

1

Günter Zöchbauer is right. You should dispatch 'input' event to update angular's model. But JQuery trigger didn't help. Only native event fixed this

@Directive({
    selector: '[myDirective]',
})
export class MyDirective  {

...

  $(this.elRef.nativeElement).my-plugin(':selected', (ev, suggestion) => {
    const inputEvent: any = document.createEvent('CustomEvent');
    inputEvent.initEvent('input', true, true);
    el.dispatchEvent(inputEvent);
  });
}

answered Dec 22, 2017 at 18:35

Vincente

4655 silver badges15 bronze badges

Comments

Manube · Accepted Answer · 2016-07-10 10:13:38Z

0

I think Zone is not aware of third-party variable changes, hence third-party variable changes are not reflected in Angular

You could try to place your jQuery code inside an angular zone, by implementing something like this:

import Zone: import {NgZone} from 'angular2/core' or import {NgZone} from '@angular/core' , depending on the Angular 2 version you are using;
add zone: NgZone to the constructor arguments of MyDirective;

replace $('.input-field').plugin(); by

zone.run( () => {$('.input-field').plugin(); });

Here is a post about Change detection and Zone

Hope this will help you...

edited Jul 10, 2016 at 10:13

answered Jul 10, 2016 at 8:22

Manube

5,2294 gold badges38 silver badges61 bronze badges

12 Comments

r_31415 Over a year ago

Thanks,. Probably this is on the right. Unfortunately, I still can't make it work. I wrapped the instantiation of the plugin (including the part that detects user selection) with zone.run, but that didn't help. I tried to use zone.run only for $('.input-field').my-plugin(':selected'..., but it doesn't change anything. I will try to use a Plunker demo to show the difference.

Manube Over a year ago

sorry to hear it did not solve it yet. Yes a plunker would be ideal to work on the isolated issue

r_31415 Over a year ago

I updated the question with a demo. I also wrote this version using zone.run.

Manube Over a year ago

great , will look into it when I have access to a proper computer (using a phone right now )

r_31415 Over a year ago

Thank you! I appreciate your help.

|

Collectives™ on Stack Overflow

Angular 2 doesn't update input value modified by third-party libraries

5 Answers 5

Comments

Comments

2 Comments

Comments

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related