CODEWITHSUNDEEP
angulartypescriptangular-ngmodel
Kumaresan Sd
Kumaresan Sd

Reputation: 1516

Ngmodel value is updating wrongly?

I have using one third party dropdown and calender component, if i change value ngmodel value is updating wrongly. It has to take current value instead of this it takes old value

sample: ngmodel not updating

How to update current value to ngmodel..? Please suggest good answer

Reproducing procedure:

1.run sample link

  1. change drop-down value or calendar value

3.see console log, current value is taken using argument but ngmodel shows old value

Html file

<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">

<ejs-datepicker id="date" (change)="onChange($event)" [(ngModel)]="ModelDate"> </ejs-datepicker>

<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (change)="onDropChange($event)"></ejs-dropdownlist>

{{ModelDate}}

ts file

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  public ModelDate : any ;


  public data: string[] = [ 'Badminton', 'Basketball', 'Cricket', 'Football' ];
    // set a value to pre-select
    public Modelvalue: string = 'Badminton';

  onChange(args){
    // debugger         
      console.log("NgModelvalue:" + this.ModelDate);    
     console.log("Selected value:"  +args.value);
  }
  onDropChange(args){
    debugger
    // args.dataBind();
    console.log("NgModelvalue:" + this.Modelvalue);    
     console.log("Selected value:" +args.value);
  }
}

Upvotes: 3

Views: 1627

Answers (4)

Sandipsinh Parmar
Sandipsinh Parmar

Reputation: 101

For your dropdown you have used change() event. instead of change use ngModelChange(). by using ngModelChange your ngModel will update.

<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>

Upvotes: 1

Anshu Bansal
Anshu Bansal

Reputation: 344

Replace the (change) function with (ngModelChange) function. Because updating model value is taking a bit more time and log gets printed prior.

Try this - 

<ejs-dropdownlist id='ddlelement' [dataSource]='data' [(ngModel)]='Modelvalue' placeholder='Select a game' (ngModelChange)="onDropChange($event)"></ejs-dropdownlist>

It will print data whenever model value gets change.

Upvotes: 1

filipbarak
filipbarak

Reputation: 1905

This is expected behaviour and it's connected to the change event. Basically when the change event is fired the event part of ngModel isn't updated yet.

Basically you need to use (ngModelChange) separately with [ngModel].

See more here: https://github.com/angular/angular/issues/3406

and here: Angular 2 change event - model changes

Upvotes: 2

Dnyaneshwar123456
Dnyaneshwar123456

Reputation: 70

What you used till now?Can you please show me some code? I think property binding or two way binding [()] will solve your prbolem

Upvotes: 0

Related Questions