Any way to change ngModal value in input field using javascript

Question

My problem is when I change input field value using javascript, it won't change in ngModel value.

For example:

//html 
<input type="text" name="date" [(ngModel)]="date">

Typescript

  var date : any;
    constructor(
            // some code
        ) {
            this.date="10:10:2016";
        }

When I console 'date' it will show 10:10:2016

After executing this Javascript code

document.getElementsByName("date")[0].value = "15:10:2016";

text field will change its value, but ngModel value won't change

btw I use jQuery datepicker

Is it banner or date ?

Searching
– Searching

2017-01-09 16:56:11 +00:00
Commented Jan 9, 2017 at 16:56 — Searching
– Searching, Commented Jan 9, 2017 at 16:56
date sorry my mistake

Nandhu
– Nandhu

2017-01-09 16:56:33 +00:00
Commented Jan 9, 2017 at 16:56 — Nandhu
– Nandhu, Commented Jan 9, 2017 at 16:56

Community · Accepted Answer · 2017-05-23 12:17:37Z

1

You need to trigger an input event on the element so Angular knows that something changed. Look at the answer here: Change AngularJS input text value using javascript

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jan 9, 2017 at 16:54

sloppypasta

1,12610 silver badges16 bronze badges

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

4 Comments

Nandhu Over a year ago

tried $('[name="date"]').keydown(); $('[name="date"]').keyup(); $('[name="date"]').keypress();; $('[name="date"]').blur(); but nothing works

sloppypasta Over a year ago

try $('[name="date"]').trigger("input")

sloppypasta Over a year ago

How are you checking whether ngModel is changing on the backend?

Nandhu Over a year ago

i use test function on button click to console it testing(){ console.log(this.date); }

candidJ · Accepted Answer · 2017-01-09 17:46:39Z

1

you need to execute the javascript code in ngAfterViewInit

ngAfterViewInit() {  
  let myNewDate= document.getElementsByName("date")[0].value = "15:10:2016";; 
  this.date = myNewDate;
}

and assign the value to your date variable.

answered Jan 9, 2017 at 17:46

candidJ

4,3791 gold badge24 silver badges33 bronze badges

2 Comments

Nandhu Over a year ago

Thanks , this code works fine . but i use external js (jquery) to assign value to input field and i think i found a solution..

Nandhu Over a year ago

Use jquery input function in ngView and assign value of input field value to ngModel now i don't have access to my pc to test this code. Will post solution after testing :) , your answer helped me to solve my problem .. thank you

Collectives™ on Stack Overflow

Any way to change ngModal value in input field using javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related