ngModelChange no longer working

ngModelChange no longer working

Posted by: ssmith on 8 March 2018, 7:58 am EST

• 

  ssmith

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 March 2018, 7:58 am EST

  We have a cell template on a Wijmo Grid in an Angular 5 project using Wijmo 5. When the value in a dropdown menu item changes, a function should be called to update that column in the grid.

  The cell template looks like this:

                <wj-combo-box  class="event-wj-combo-box"  
                name="Loading_Time_Title"
                id="Loading_Time_Title" 
                [(ngModel)]="Loading_Time_Title" 
                [itemsSource]="dropdown_list.times" 
                (ngModelChange)="title_change($event,'Loading_Time')" 
                [selectedValuePath]="'lookup_code'" 
                [displayMemberPath]="'text_long'"
             >
  

  When the value changes, this function is called:

    title_change(e, key) {
      console.log("e,key",e,key);
      _.each(this.data, function (item) {
        (item as any)[key] = e;
      });
      this.data_view = new wjCore.CollectionView(this.data);
      this.groupData_view = new wjCore.CollectionView(this.groupData);
    }
  

  This was working properly in an earlier version of Wijmo 5 (v.380 - with a version number in that version), however it’s not working in the current .409 release.

  Has this function changed, or the method signature changed? Is this a bug?

  Thanks!
  
  :Steve

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 8 March 2018, 9:07 pm EST

  Hi

  I have requested the Dev Team to investigate this. The tracking ID is 312454

  Until then you can use selectedIndexChanged event instead.

  Refer to following code snippet:-

  <wj-combo-box #cb class="event-wj-combo-box" 
  
  name="Loading_Time_Title"
  
  id="Loading_Time_Title" 
  
  [(ngModel)]="Loading_Time_Title" 
  
  [itemsSource]="dropdown_list.times" 
  
  (selectedIndexChanged)="title_changed(cb.selectedValue,'Loading_Time')" 
  
  [selectedValuePath]="'lookup_code'" 
  
  [displayMemberPath]="'text_long'"
  

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 13 March 2018, 4:28 am EST

  We have a ton of production code running on the 380 build, and dev code running the broken 409 release, so we don’t want to make code changes in dev to sidestep this issue, however, that puts us at a bit of a standstill on rolling out the new version. I’m also hesitant to roll back to the older version in dev as there may be regression issues there that will be just as problematic.

  Is there any update on this issue?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 13 March 2018, 4:37 pm EST

  Hi Smith,
  
  We are sorry, this issue is still with the development team. We will let you know as we get any update on this.

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 April 2018, 10:24 pm EST

  Hi,
  
  Sorry for the delay.
  
  The quick workaround is to remove the (selectedIndexChanged) binding, i.e. this one:

          ```
  

  (selectedIndexChanged)=“index_changed(cb.selectedValue,‘Loading_Time’)”

  
  Could you please let us know why you need to have both ngModelChange and selectedIndexChanged event handler?
  
  ~Manish

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 2 May 2018, 3:55 am EST

  Sorry for the delay in getting back to this.

  (selectedIndexChanged) solve the problem, and effectively replaces ngModelChange, so that’s great.

  Is there an equivalent mechanism on wj-input-date?

  
              <wj-input-date #MoveInDate
                [(ngModel)]="groupData[0].Move_In_Date" 
                (selectedIndexChanged)="title_change(MoveInDate.selectedValue,'Move_In_Date')" 
                format="dd/MMM/yyyy">
              </wj-input-date>
  
  

  This doesn’t work, whereas the wj-combo-box implementation works exactly as expected.

  Thanks!

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 2 May 2018, 1:55 pm EST

  Hi,
  
  The textChanged event would be an appropriate event for InputDate. This gets triggered when Control text gets changed by typing or date selection from Calender(DropDown).

  There is another event call valueChanged may also be useful as per your requirement.
  
  The valueChanged event gets triggered when value gets changed using DropDown or focusing out from Control on changing Control text.

  Please refer to the demo sample:
  
  https://stackblitz.com/edit/angular-icj4ev?file=app/app.component.ts

  Also, the issue raised has been fixed and included in latest nightly build. If you would like to give a try, download it to your project directly using npm install wijmo@nightly command.

  You may also download the build from here:
  
  http://prerelease.componentone.com/wijmo5/

  ~Manish

• 

  ssmith

  • Post Options:
  • Link
    Copy

  Posted 4 May 2018, 6:04 am EST

  That works - thanks!