Ngmodel value is updating wrongly?

ngmodelchange not updating model
ngmodelchange fires before ngmodel changes
ngbtypeahead

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);
  }
}

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.

angular - Ngmodel value is updating wrongly?, Replace the (change) function with (ngModelChange) function. Because updating model value is taking a bit more time and log gets printed  As said in the title; the ngModelChange callback is firing before the actual value of my NgModel is updating, which is the wrong order for an angular model component. It's breaking my validation expectations.

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

Ngmodel value is updating wrongly? - angular - html, 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  This means that the [(ngModel)] is not setting the select box value correctly. I have tested this with 1 way binding [ngModel] to ensure its not setting the value after the function is called. Setting the value of model.category inside the change function, same results.

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>

(typeahead, bug): Model value updated incorrectly when input in , (typeahead, bug): Model value updated incorrectly when input in { updateOn: "​blur" } mode #2786. Closed. AbakumovAlexandr opened this issue  Cannot change the value of instance variable; Format input value after Angular2 ngModel is applied; change variable value with a dropdown menu; Change Variable Value with Radio Buttons; Cannot get value of php variable in accordance with the value of js variable; Ngmodel value is updating wrongly? Returning value which is obtained in

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

ngModelChange fires before ngModel changes · Issue #414 · kekeh , As said in the title; the ngModelChange callback is firing before the actual value of my NgModel is updating, which is the wrong order for an  standalone: When set to true, the ngModel will not register itself with its parent form, and acts as if it's not in the form. Defaults to false. updateOn: Defines the event upon which the form control value and validity update. Defaults to 'change'. Possible values: 'change' | 'blur' | 'submit'.

ngModelOptions, This directive allows you to modify the behaviour of ngModel directives within your Changes on the inputs within the form will update the model only when the  The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive. ngModel is responsible for: Binding the view into the model, which other directives such as input, textarea or select require.

Template-driven forms, The @Component selector value of "app-hero-form" means you can drop this form in a The NgModel directive doesn't just track state; it updates the control with That says something is wrong but the user doesn't know what is wrong or  We will use two-way binding with NgModel in text box and select box in our example. [(ngModel)] can set only data-bound property. To use NgModel we need to import FormsModule and add it to imports attribute of @NgModule in our module file. Now for the example of two-way data binding using NgModel find the code snippet.

Angular 2, NgModel and Custom Form Components, ngModel in fact can be used to build great, template-driven forms that allow Detailed list of validation errors that notify the user what is wrong with their writeValue is used to update the value of our control, but it takes an  You perhaps think that ngModel is only suitable for binding plain jane <input> controls to values, and that ngModel does not work for custom form components; ngModel in fact can be used to build great, template-driven forms that allow you put more focus on your data model and less focus on creating the right FormBuilder structures. You can have custom components and complex validation, too.

Comments
  • HI @Anusha Bansal, Thanks for your valuable support..,.....!. It works fine for me.
  • You are logging args.value .. Change it with args only. It will work as we have binded the function with ngModelChange
  • Check again. I have checked its working or show me the ejs tag code for calendar what you change in that.
  • <ejs-datepicker id="date" (ngModelChange)="onChange($event)" [(ngModel)]="ModelDate"> </ejs-datepicker>
  • Put (ngModelChange) after ngModel like this - <ejs-datepicker id="date" [(ngModel)]="ModelDate" (ngModelChange)="onChange($event)"> </ejs-datepicker>.. Now check
  • the fact that you are new to Angular doesn't prevent you from taking some time to study what is given and try to understand it by yourself before asking for more precision (for a couple of hours instead of one minute)
  • OKay @Pac0, but still i didn't get clear view about my sollution.!
  • I would like to mention two things here... 1)you are getting value in your ModelValue and ModelDate use {{}} this bracket in html you can see it. 2) If you want to get Value in ts file use formcontrol
  • If you agree then please tick mark this as a solution